A collapsible jQuery menu plugin
npm install metismenu
> A collapsible jQuery menu plugin
>
> This version does not support any version of IE browser.
- Getting started
* Install
* Download
- Usage
* Stopping list opening on certain elements
+ toggle
+ dispose
+ preventDefault
+ triggerElement
+ parentTrigger
+ subMenu
- Events
- Migrating to v3 from v2
- Demo
- About
* Related projects
* Contributors
* Contributing
* Release History
* Author
* License
Install with npm:
``sh`
npm install metismenu
Install with yarn:
`sh`
yarn add metismenu
Install with bun:
`sh`
bun add metismenu
Install with composer
`sh`
composer require onokumus/metismenu:dev-master
1. Include metismenu StyleSheet
`html`
1. Include jQuery
`html`
1. Include metisMenu plugin's code
`html`
1. Using with ESM/Bundler (Vite, Webpack, Rollup)
`javascript
import $ from 'jquery';
import MetisMenu from 'metismenu';
// OR
import { MetisMenu } from 'metismenu';
const mm = new MetisMenu("#metismenu");
// OR
$("#metismenu").metisMenu();
`
1. Add id attribute to unordered list
`html
`
1. Make expand/collapse controls accessible
> Be sure to add aria-expanded to the element a. 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 of aria-expanded="false". If you've set the collapsible element's parent li element to be open by default using the mm-active class, set aria-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.
`html`
1. Arrow Options
> add has-arrow class to a element
`html`
1. Call the plugin:
`javascript`
$("#metismenu").metisMenu();
Setting aria-disabled="true" in the element as shown will stop metisMenu opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:
`html`
List 1
#### toggle
Type: Booleantrue
Default:
For auto collapse support.
`javascript`
$("#metismenu").metisMenu({
toggle: false
});
#### dispose
Type: Stringnull
Default:
For stop and destroy metisMenu.
`javascript`
$("#metismenu").metisMenu('dispose');
#### preventDefault
Type: Booleantrue
Default:
> Prevents or allows dropdowns' onclick events after expanding/collapsing.
`javascript`
$("#menu").metisMenu({
preventDefault: false
});
_since from version 2.7.0_
#### triggerElement
Type: jQuery selectora
Default:
`javascript`
$("#metismenu").metisMenu({
triggerElement: '.nav-link' // bootstrap 5
});
#### parentTrigger
Type: jQuery selectorli
Default:
`javascript`
$("#metismenu").metisMenu({
parentTrigger: '.nav-item' // bootstrap 5
});
#### subMenu
Type: jQuery selectorul
Default:
`javascript`
$("#metismenu").metisMenu({
subMenu: '.nav.flex-column' // bootstrap 5
});
|Event Type |Description|
|--------------|--------------|
|show.metisMenu |This event fires immediately when the _show instance method is called.|ul
|shown.metisMenu |This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).|_hide
|hide.metisMenu |This event is fired immediately when the method has been called. |ul
|hidden.metisMenu |This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).|
* Update metisMenu.js & metisMenu.css filesactive
* Change class to mm-active
https://onokumus.github.io/metismenu/
Contains a simple HTML file to demonstrate metisMenu plugin.
* @metismenu/react: react component for MetisMenu | homepage
* metismenujs: MetisMenu with Vanilla-JS | homepage
| Contributor |
| --- |
|onokumus |
| diegozhu |
| sinabs |
|DrugoLebowski |
| BurkovBA |
| arthurtalkgoal |
| mrdziuban |
| nicolasigot |
| PeterDaveHello |
| kalidema |
| AndrewEastwood |
| rgnevashev |
| 719media |
| chriswiggins |
| jmagnusson |
| LukasDrgon |
| Cediddi |
| WoMayr |
| capynet |
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Please read the contributing guide for advice on opening issues, pull requests, and coding standards.
|DATE |VERSION |CHANGES|
|--------------|--------------|-----------|
|2026-01-22 |v3.1.0 |Support jQuery 4 #207|
|2021-05-16 |v3.0.7 |sass support|
|2020-03-22 |v3.0.6 |fix security vulnerabilities|
|2019-12-28 |v3.0.5 |Fix dispose to be similar to init (adding event) #184|
|2019-03-07 |v3.0.4 |fix|
|2018-10-05 |v3.0.3 |fix|
|2018-10-05 |v3.0.2 |fix|
|2018-10-05 |v3.0.1 |fix|
|2018-10-05 |v3.0.0 |more functionally|
|2018-10-05 |v2.7.9.1 |Fix dispose option #173|
|2018-06-28 |v2.7.9 |Make jquery a peer dependency|
|2018-06-14 |v2.7.8 |remove aria-expanded attribute & remove transitionend check|
|2018-02-14 |v2.7.4 |jQuery -> $ in src/metisMenu.js to fix import. #158|
|2018-02-14 |v2.7.3 |window might not be defined in node.js environment #156|
|2017-12-31 |v2.7.2 |isolate against bootstrap changes, remove old legacy ie9 code #154|
|2017-10-30 |v2.7.1 |added check in complete()-callback to break when menu was disposed #150|
|2017-03-08 |v2.7.0 |fixed has-arrow class border color & added new 3 options|aria-expanded` attribute & TypeScript type definitions support|
|2017-02-23 |v2.6.3 |fixed #129|
|2017-02-02 |v2.6.2 |doubleTapToGo option is deprecated|
|2016-12-06 |v2.6.1 |fix require.js|
|2016-11-29 |v2.6.0 |dispose support|
|2016-05-06 |v2.5.2 |fix Menu failed to remove collapsing class|
|2016-05-06 |v2.5.1 |fixed bootstrap conflict|
|2016-03-31 |v2.5.0 |Event support|
|2016-03-11 |v2.4.3 |create meteor package|
|2016-03-04 |v2.4.2 |back to version 2.4.0|
|2016-03-03 |v2.4.1 |Transition element passed to methods (removed)|
|2016-01-25 |v2.4.0 |Support AMD / Node / CommonJS|
|2016-01-08 |v2.3.0 |Adding aria-disabled=true to the link element prevents the dropdown from opening|
|2015-09-27 |v2.2.0 |Events supported & added preventDefault options|
|2015-08-06 |v2.1.0 |RTL &
|2015-07-25 |v2.0.3 |When the active item has doubleTapToGo should not collapse|
|2015-05-23 |v2.0.2 |fixed|
|2015-05-22 |v2.0.1 |changeable classname support|
|2015-04-03 |v2.0.0 |Remove Bootstrap dependency|
|2015-03-24 |v1.1.3 |composer support|
|2014-11-01 |v1.1.3 |Bootstrap 3.3.0|
|2014-07-07 |v1.1.0 |Add double tap functionality|
|2014-06-24 |v1.0.3 |cdnjs support & rename plugin|
|2014-06-18 |v1.0.3 |Create grunt task|
|2014-06-10 |v1.0.2 |Fixed for IE8 & IE9|
Osman Nuri Okumus
* GitHub Profile
* Twitter Profile
* LinkedIn Profile
Copyright © 2026, Osman Nuri Okumus.
Released under the MIT License.