A collapsible jQuery menu plugin
Install with npm:
npm install --save metismenu
Install with yarn:
yarn add metismenu
Install with composer
composer require onokumus/metismenu:dev-master
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
<!-- OR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
<script src="https://unpkg.com/jquery"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://unpkg.com/metismenu"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
<ul id="metismenu">
</ul>
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 themm-activeclass, 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 id="metismenu">
<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>
add
has-arrowclass toaelement
<ul id="metismenu">
<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>
$("#metismenu").metisMenu();
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>
Type: Boolean
Default: true
For auto collapse support.
$("#metismenu").metisMenu({
toggle: false
});
Type: String
Default: null
For stop and destroy metisMenu.
$("#metismenu").metisMenu('dispose');
Type: Boolean
Default: true
Prevents or allows dropdowns' onclick events after expanding/collapsing.
$("#menu").metisMenu({
preventDefault: false
});
since from version 2.7.0
Type: jQuery selector
Default: a
$("#metismenu").metisMenu({
triggerElement: '.nav-link' // bootstrap 5
});
Type: jQuery selector
Default: li
$("#metismenu").metisMenu({
parentTrigger: '.nav-item' // bootstrap 5
});
Type: jQuery selector
Default: ul
$("#metismenu").metisMenu({
subMenu: '.nav.flex-column' // bootstrap 5
});
| 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). |
metisMenu.js & metisMenu.css filesactive class to mm-activeContains a simple HTML file to demonstrate metisMenu plugin.
| 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 |
|---|---|---|
| 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 |
| 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 | |
| 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 & aria-expanded attribute & TypeScript type definitions support |
| 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
Copyright © 2021, Osman Nuri Okumus. Released under the MIT License.
FAQs
A collapsible jQuery menu plugin
We found that metismenu demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.