A jQuery menu plugin
HTML JavaScript CSS
Latest commit 51d4e27 Jan 11, 2017 @onokumus committed on GitHub Merge pull request #125 from diegozhu/master
add fa-fw to fa fonts icon



NPM version Bower version PHP version Build Status

A jQuery menu plugin


(TOC generated by verb using markdown-toc)


Install with npm:

$ npm install metismenu

Install with bower

$ bower install metisMenu

Install with composer

$ composer require onokumus/metismenu:dev-master




See react-metismenu

TypeScript type definitions

Install TSD globally using npm:

$ npm install tsd -g

Install metismenu TypeScript definition file

$ tsd install metismenu


  1. Include metismenu StyleSheet

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.6.1/metisMenu.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.metismenu/2.6.1/metisMenu.min.css">
  2. Include jQuery

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
  3. Include metisMenu plugin's code

    <script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.6.1/metisMenu.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.metismenu/2.6.1/metisMenu.min.js"></script>
  4. Add class metismenu to unordered list

    <ul class="metismenu" id="menu">
  5. Make expand/collapse controls accessible

    Be sure to add aria-expanded to the element a and the following ul. 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 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.

    <ul class="metismenu" id="menu">
      <li class="active">
        <a href="#" aria-expanded="true">Menu 1</a>
        <ul aria-expanded="true">
        <a href="#" aria-expanded="false">Menu 2</a>
        <ul aria-expanded="false">
  6. Arrow Options > add has-arrow class to a element
<ul class="metismenu" id="menu">
  <li class="active">
    <a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
    <ul aria-expanded="true">
    <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
    <ul aria-expanded="false">
  1. Call the plugin:


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>



Type: Boolean Default: true

For auto collapse support.

   toggle: false


Type: String Default: null

For stop and destroy metisMenu.



Type: String Default: active

   activeClass: 'active'


Type: String Default: collapse

   collapseClass: 'collapse'


Type: String Default: in

   collapseInClass: 'in'


Type: String Default: collapsing

   collapsingClass: 'collapsing'


Type: Boolean Default: false

For double tap support.

   doubleTapToGo: true

The doubleTapToGo option will be deprecated in the next release.


Type: Boolean Default: true

Prevents or allows dropdowns' onclick events after expanding/collapsing.

   preventDefault: false


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).


$ npm install
$ bower install
$ grunt serve



Contains a simple HTML file to demonstrate metisMenu plugin.

Release History

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 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 Okumuş


Copyright © 2016, Osman Nuri Okumuş.ş Released under the MIT license.

This file was generated by verb-generate-readme, v0.2.0, on December 06, 2016.