Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including metismenu with all npm packages installed. Try it out:

require("jquery/package.json"); // jquery is a peer dependency. var metismenu = require("metismenu")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

metismenu v3.0.6

A jQuery menu plugin

metismenu NPM version NPM monthly downloads NPM total downloads

[![]

A jQuery menu plugin

metismenu without jQuery

If you want to try MetisMenu without jQuery, see MetisMenuJS repository.

(TOC generated by verb using markdown-toc)

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

download

Usage

  1. 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">
  1. Include jQuery
<script src="https://unpkg.com/jquery"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  1. Include metisMenu plugin's code
<script src="https://unpkg.com/metismenu"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
  1. Add id attribute to unordered list
<ul id="metismenu">

</ul>
  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.

<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>
  1. Arrow Options

add has-arrow class to a 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>
  1. 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 4
 });

parentTrigger

Type: jQuery selector Default: li

 $("#metismenu").metisMenu({
   parentTrigger: '.nav-item' // bootstrap 4
 });

subMenu

Type: jQuery selector Default: ul

 $("#metismenu").metisMenu({
   subMenu: '.nav.flex-column' // bootstrap 4
 });

Events

Event TypeDescription
show.metisMenuThis event fires immediately when the _show instance method is called.
shown.metisMenuThis event is fired when a collapse ul element has been made visible to the user (will wait for CSS transitions to complete).
hide.metisMenuThis event is fired immediately when the _hide method has been called.
hidden.metisMenuThis 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 to mm-active

Demo

http://mm.onokumus.com

Contains a simple HTML file to demonstrate metisMenu plugin.

About

Related projects

Contributors

CommitsContributor
209onokumus
8diegozhu
4sinabs
4DrugoLebowski
3BurkovBA
2arthurtalkgoal
2mrdziuban
2nicolasigot
2PeterDaveHello
2kalidema
2AndrewEastwood
2rgnevashev
1719media
1chriswiggins
1jmagnusson
1LukasDrgon
1Cediddi
1WoMayr
1capynet

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

DATEVERSIONCHANGES
2020-03-22v3.0.6fix security vulnerabilities
2019-12-28v3.0.5Fix dispose to be similar to init (adding event) #184
2019-03-07v3.0.4fix
2018-10-05v3.0.3fix
2018-10-05v3.0.2fix
2018-10-05v3.0.1fix
2018-10-05v3.0.0more functionally
2018-10-05v2.7.9.1Fix dispose option #173
2018-06-28v2.7.9Make jquery a peer dependency
2018-06-14v2.7.8remove aria-expanded attribute & remove transitionend check
2018-02-14v2.7.4jQuery -> $ in src/metisMenu.js to fix import. #158
2018-02-14v2.7.3window might not be defined in node.js environment #156
2017-12-31v2.7.2isolate against bootstrap changes, remove old legacy ie9 code #154
2017-10-30v2.7.1added check in complete()-callback to break when menu was disposed #150
2017-03-08v2.7.0fixed has-arrow class border color & added new 3 options
2017-02-23v2.6.3fixed #129
2017-02-02v2.6.2doubleTapToGo option is deprecated
2016-12-06v2.6.1fix require.js
2016-11-29v2.6.0dispose support
2016-05-06v2.5.2fix Menu failed to remove collapsing class
2016-05-06v2.5.1fixed bootstrap conflict
2016-03-31v2.5.0Event support
2016-03-11v2.4.3create meteor package
2016-03-04v2.4.2back to version 2.4.0
2016-03-03v2.4.1Transition element passed to methods (removed)
2016-01-25v2.4.0Support AMD / Node / CommonJS
2016-01-08v2.3.0Adding aria-disabled=true to the link element prevents the dropdown from opening
2015-09-27v2.2.0Events supported & added preventDefault options
2015-08-06v2.1.0RTL & aria-expanded attribute & TypeScript type definitions support
2015-07-25v2.0.3When the active item has doubleTapToGo should not collapse
2015-05-23v2.0.2fixed
2015-05-22v2.0.1changeable classname support
2015-04-03v2.0.0Remove Bootstrap dependency
2015-03-24v1.1.3composer support
2014-11-01v1.1.3Bootstrap 3.3.0
2014-07-07v1.1.0Add double tap functionality
2014-06-24v1.0.3cdnjs support & rename plugin
2014-06-18v1.0.3Create grunt task
2014-06-10v1.0.2Fixed for IE8 & IE9

Author

Osman Nuri Okumus

License

Copyright © 2020, Osman Nuri Okumus. Released under the MIT License.


This file was generated by verb-generate-readme, v0.8.0, on March 22, 2020.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free