metismenujs 
MetisMenu: Collapsible menu plugin with Vanilla-JS
This plugin does not support any version of IE browser.
Please consider following this project's author, Osman Nuri Okumus, and consider starring the project to show your
Getting started
Install
Install with npm:
$ npm install metismenujs
Install with yarn:
$ yarn add metismenujs
Add project file to metismenu
import MetisMenu from 'metismenujs';
// or
const MetisMenu = require('metismenujs');
// create new instance
const mm = new MetisMenu('#menu', {...});
// or call MetisMenu static attach method
const mm = MetisMenu.attach('#menu', {...})
Install with composer
$ composer require onokumus/metismenujs:dev-master
Download
Usage
- Include metismenujs StyleSheet
<link rel="stylesheet" href="https://unpkg.com/metismenujs/dist/metismenujs.min.css">
<!-- OR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css">
- Include metismenujs plugin's code
<script src="https://unpkg.com/metismenujs/dist/metismenujs.min.js"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.js"></script>
- Add class
metismenuto unordered list
<ul class="metismenu" id="menu">
</ul>
- Make expand/collapse controls accessible
Be sure to add
aria-expandedto 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 parentlielement to be open by default using theactiveclass, 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 class="metismenu" id="menu">
<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-arrowclass toaelement
<ul class="metismenu" id="menu">
<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:
new MetisMenu("#menu");
// or
MetisMenu.attach('#menu');
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>
Options
toggle
Type: Boolean Default: true
For auto collapse support.
new MetisMenu("#menu", {
toggle: false
});
triggerElement
Type: css selector Default: a
new MetisMenu("#menu", {
triggerElement: '.nav-link' // bootstrap 4
});
parentTrigger
Type: css selector Default: li
new MetisMenu("#menu", {
parentTrigger: '.nav-item' // bootstrap 4
});
subMenu
Type: css selector Default: ul
new MetisMenu("#menu", {
subMenu: '.nav.flex-column' // bootstrap 4
});
API
dispose
For stop and destroy metisMenu.
const mm = new MetisMenu("#menu");
mm.dispose();
update
Re-init metisMenu.
const mm = new MetisMenu("#menu");
mm.dispose();
// ajax ...
mm.update();
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 v1.0.3 from v1.2.0
- Update
metisMenu.js&metisMenu.cssfiles - Change
activeclass tomm-active
Demo
https://onokumus.com/metismenujs
Contains a simple HTML file to demonstrate metisMenu plugin.
About
Related projects
- metismenu: A jQuery menu plugin | homepage
- @metismenu/react: react.js component for metismenu | homepage
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Author
Osman Nuri Okumus
License
Copyright © 2021, Osman Nuri Okumus. Released under the MIT License.
17 Sep 24, 2022
29 Dec 4, 2022
7 Nov 2, 2022
24 Feb 14, 2022
2 Feb 16, 2021
1 Feb 8, 2022
4 Dec 18, 2022
2 Jun 1, 2022
7 Jul 19, 2022
6 Aug 11, 2022
12 Dec 24, 2022
19 Dec 8, 2022
5 Jul 31, 2022
4 Mar 17, 2022
2 Feb 9, 2021
3 Nov 6, 2022
13 Dec 19, 2022
44 Oct 21, 2022
1 Apr 29, 2021