README

A collapsible jQuery menu plugin

This version does not support any version of IE browser.

Getting started
- Install
- Download
Usage
- Stopping list opening on certain elements
Events
Migrating to v3 from v2
Demo
About

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

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

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>

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

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

@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

Author

Osman Nuri Okumus

onokumus / metismenu

Maintainers

Details