jQuery Accordion Menu Plugin For Bootstrap 3 - metisMenu

jQuery Accordion Menu Plugin For Bootstrap 3 - metisMenu
File Size: 77.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.

See also:

How to use it:

1. Include the Bootstrap 3 framework on your web page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 

2. Include Font Awesome for the control buttons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

3. Create an accordion menu using nested lists.

<ul id="menu">
<li class="active"> <a href="#">Menu 0 <span class="fa arrow"></span></a>
<li><a href="#">item 0.1</a></li>
<li><a href="#">item 0.2</a></li>
<li><a href="#">item 0.3</a></li>
<li><a href="#">item 0.4</a></li>
<li> <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li> <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
<li><a href="#">item 1.3.4</a></li>
<li><a href="#">item 1.4</a></li>
<li> <a href="#">Menu 1.5 <span class="fa plus-minus"></span></a>
<li><a href="#">item 1.5.1</a></li>
<li><a href="#">item 1.5.2</a></li>
<li><a href="#">item 1.5.3</a></li>
<li><a href="#">item 1.5.4</a></li>
<li> <a href="#">Menu 2 <span class="glyphicon arrow"></span></a>
<li><a href="#">item 2.1</a></li>
<li><a href="#">item 2.2</a></li>
<li><a href="#">item 2.3</a></li>
<li><a href="#">item 2.4</a></li>

4. Add the following styles in your CSS to style the controls.

.arrow {
float: right;
.glyphicon.arrow:before {
content: "\e079";
.active > a > .glyphicon.arrow:before {
content: "\e114";
.fa.arrow:before {
content: "\f104";
.active > a > .fa.arrow:before {
content: "\f107";
.plus-times {
float: right;
.fa.plus-times:before {
content: "\f067";
.active > a > .fa.plus-times {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
.plus-minus {
float: right;
.fa.plus-minus:before {
content: "\f067";
.active > a > .fa.plus-minus:before {
content: "\f068";

5. Include the jQuery library and jQuery metisMenu plugin on the page, and then call the plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.metisMenu.js"></script> 
$(function () {
toggle: false // disable the auto collapse. Default: true.

6. Default settings.


// auto collapse. 
toggle: true,

// prevents or allows dropdowns' onclick events after expanding/collapsing.
preventDefault: true,

// CSS classes
activeClass: 'active',
collapseClass: 'collapse',
collapseInClass: 'in',
collapsingClass: 'collapsing',

// callbacks
onTransitionStart: false,
onTransitionEnd: false


7. Events.

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

Change logs:

v2.6.2 (2017-02-02)

  • deprecated doubleTapToGo option
  • fix require.js is 

v2.6.0 (2016-11-29)

v2.5.2 (2016-05-07)

  • fix Menu failed to remove collapsing class

v2.5.0 (2016-03-31)

  • Events support

v2.4.3 (2016-03-12)

  • update

v2.4.1 (2016-03-04)

  • Transition element passed to methods

v2.4.0 (2016-01-26)

  • Support AMD / Node / CommonJS

v2.3.0 (2015-09-28)

  •   Disable list expansion if aria-disabled is true on link element

v2.2.0 (2015-09-28)

  • Events supported & added preventDefault options

v2.1.0 (2015-08-07)

  • RTL & aria-expanded attribute & TypeScript type definitions support

v2.0.3 (2015-07-26)

  • add possibility to modify collapase, in and collapsing default classes
  • Fixed: When the active item has doubleTapToGo should not collapse

v2.0.1 (2015-05-22)

  • changeable classname support 
  • bug fixed

v2.0.0 (2015-04-04)

  • remove Bootstrap dependency.


  • v1.1.3


  • v1.1.0


  • Fixed for IE8 & IE9


  • NEW version.

This awesome jQuery plugin is developed by onokumus. For more Advanced Usages, please check the demo page or visit the official website.