- ×
A jQuery menu plugin
Filed under user interfaceShow Allmetismenu
A collapsible jQuery menu plugin
This version does not support any version of IE browser.
Getting started
Install
Install with npm:
npm install --save metismenu
Install with yarn:
yarn add metismenu
Install with composer
composer require onokumus/metismenu:dev-master
Download
Usage
Include metismenu StyleSheet
<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">
Include jQuery
<script src="https://unpkg.com/jquery"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
Include metisMenu plugin's code
<script src="https://unpkg.com/metismenu"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
Add id attribute to unordered list
<ul id="metismenu"> </ul>
Make expand/collapse controls accessible
Be sure to add
aria-expanded
to 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 parentli
element to be open by default using themm-active
class, 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>
- Arrow Options
add
has-arrow
class toa
element<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>
Call the plugin:
$("#metismenu").metisMenu();
Stopping list opening on certain elements
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>
toggle
Type:
Boolean
Default:true
For auto collapse support.
$("#metismenu").metisMenu({ toggle: false });
dispose
Type:
String
Default:null
For stop and destroy metisMenu.
$("#metismenu").metisMenu('dispose');
preventDefault
Type:
Boolean
Default:true
Prevents or allows dropdowns' onclick events after expanding/collapsing.
$("#menu").metisMenu({ preventDefault: false });
since from version 2.7.0
triggerElement
Type:
jQuery selector
Default:a
$("#metismenu").metisMenu({ triggerElement: '.nav-link' // bootstrap 5 });
parentTrigger
Type:
jQuery selector
Default:li
$("#metismenu").metisMenu({ parentTrigger: '.nav-item' // bootstrap 5 });
subMenu
Type:
jQuery selector
Default:ul
$("#metismenu").metisMenu({ subMenu: '.nav.flex-column' // bootstrap 5 });
Events
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).Migrating to v3 from v2
- Update
metisMenu.js
&metisMenu.css
files - Change
active
class tomm-active
Demo
Contains a simple HTML file to demonstrate metisMenu plugin.
About
Related projects
- @metismenu/react: react component for MetisMenu | homepage
- metismenujs: MetisMenu with Vanilla-JS | homepage
Contributors
Contributing
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.
Release History
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 options2017-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 & aria-expanded
attribute & TypeScript type definitions support2015-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 Author
Osman Nuri Okumus
License
Copyright © 2021, Osman Nuri Okumus. Released under the MIT License.