MetisMenuJS

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

download

Usage

1. 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">

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

3. Add class metismenu to unordered list

   <ul class="metismenu" id="menu">
   
   </ul>

4. 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 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="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>

5. Arrow Options

   add has-arrow class to a element

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

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

License

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