Collapsible menu plugin with Vanilla-JS
- Browser Support
- Installing
- Usage
- Options
- API
- Events
- CSS custom properties (variables)
- Migrating to v1.0.3 from v1.4.0
- Examples
- Demo
- About
This plugin does not support any version of IE browser.
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | ❌ |
Using npm:
npm install metismenujsUsing yarn:
yarn add metismenujsUsing pnpm:
pnpm add metismenujsOnce the package is installed, you can import the library using import or require approach:
// recommended approach
import { MetisMenu } from 'metismenujs';// You can also use the default export
import MetisMenu from 'metismenujs';If you use require for importing, only default export is available:
const MetisMenu = require('metismenujs');Note CommonJS usage In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with
require(), add the following to yourtsconfig.json:
{
"compilerOptions": {
"moduleResolution": "NodeNext"
}
}Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/metismenujs"></script>Using unpkg CDN:
<script src="https://unpkg.com/metismenujs"></script>Using jsDelivr CDN:
<script type="module">
import { MetisMenu } from 'https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.esm.min.js';
</script>Using unpkg CDN:
<script type="module">
import { MetisMenu } from 'https://unpkg.com/metismenujs/dist/metismenujs.esm.min.js';
</script>Install with composer
composer require onokumus/metismenujs:dev-masterReady to use files are located in the dist directory.
-
Include metismenujs StyleSheet
jsDelivr :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css">
unpkg :
<link rel="stylesheet" href="https://unpkg.com/metismenujs/dist/metismenujs.min.css">
import 'metismenujs/style';
or sass source file
import 'metismenujs/sass';
-
Add class
metismenuto unordered list
<ul class="metismenu" id="menu">
</ul>- Make expand/collapse controls accessible
Be sure to add
aria-expandedto the elementa. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value ofaria-expanded="false". If you've set the collapsible element's parentlielement to be open by default using theactiveclass, setaria-expanded="true"on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
<ul class="metismenu" id="menu">
<li class="mm-active">
<a href="#" aria-expanded="true">Menu 1</a>
<ul>
...
</ul>
</li>
<li>
<a href="#" aria-expanded="false">Menu 2</a>
<ul>
...
</ul>
</li>
...
</ul>- Arrow Options
add
has-arrowclass toaelement
<ul class="metismenu" id="menu">
<li class="mm-active">
<a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
<ul>
...
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
<ul>
...
</ul>
</li>
...
</ul>- Call the plugin:
new MetisMenu("#menu");
// or
MetisMenu.attach('#menu');Setting aria-disabled="true" in the <a> element as shown will stop metisMenu opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:
<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>| Option | Type | Default | Description | Example |
|---|---|---|---|---|
| toggle | Boolean | true | For auto collapse support. | new MetisMenu("#menu", { toggle: false }); |
| triggerElement | css selector | a | new MetisMenu("#menu", { triggerElement: '.nav-link' }); |
|
| parentTrigger | css selector | li | new MetisMenu("#menu", { parentTrigger: '.nav-item' }); |
|
| subMenu | css selector | ul | new MetisMenu("#menu", { subMenu: '.nav.flex-column' }); |
For stop and destroy metisMenu.
const mm = new MetisMenu("#menu");
mm.dispose();Re-init metisMenu.
const mm = new MetisMenu("#menu");
mm.dispose();
// ajax ...
mm.update();| Event Type | Description |
|---|---|
| show.metisMenu | This event fires immediately when the show instance method is called. |
| shown.metisMenu | This event is fired when a collapse ul element has been made visible to the user (will wait for CSS transitions to complete). |
| hide.metisMenu | This event is fired immediately when the hide method has been called. |
| hidden.metisMenu | This event is fired when a collapse ul element has been hidden from the user (will wait for CSS transitions to complete). |
| Property | Default | Description |
|---|---|---|
| --mm-transition-timing-function | ease | This property sets how intermediate values are calculated for CSS properties being affected by a transition effect. |
| --mm-trantisition-duration | 0.35s | This property sets the length of time a transition animation should take to complete. |
- Update
metisMenu.js&metisMenu.cssfiles - Change
activeclass tomm-active
https://github.com/metismenu/examples
https://onokumus.github.io/metismenujs
Contains a simple HTML file to demonstrate metisMenu plugin.
- metismenu: A jQuery menu plugin | homepage
- @metismenu/react: react.js component for metismenu | homepage
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Osman Nuri Okumus
Copyright © 2023, Osman Nuri Okumuş. Released under the MIT License.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent