Collapsible Menu Plugin with Vanilla-JS | MetisMenu

How to make use of it:

Install the metisMenu with package deal managers.

# Yarn
$ yarn add metisMenu
# NPM
$ npm install metisMenu --save

Include the metisMenu’s JavaScript and CSS files on the web page.

<link rel="stylesheet" href="/path/to/metismenujs.min.css">
<script src="/path/to/metismenujs.min.js"></script>

Create multi-level navigation from nested HTML lists as follows:

<ul class="metismenu" id="example">
  <li>
    <a class="has-arrow" href="#" aria-expanded="false">
      <span class="fa fa-fw fa-github fa-lg"></span>
      metisMenu
    </a>
    <ul class="collapse">
      <li>
        <a href="https://github.com/onokumus/metismenujs">
          <span class="fa fa-fw fa-code-fork"></span> Fork
        </a>
      </li>
      <li>
        <a href="https://github.com/onokumus/metismenujs">
          <span class="fa fa-fw fa-star"></span> Star
        </a>
      </li>
      <li>
        <a href="https://github.com/onokumus/metismenujs/issues">
          <span class="fa fa-fw fa-exclamation-triangle"></span> Issues
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
    <ul class="collapse">
      <li>
        <a href="#">item 0.1</a>
      </li>
      <li>
        <a href="#">item 0.2</a>
      </li>
      <li>
        <a href="http://onokumus.com">onokumus</a>
      </li>
      <li>
        <a href="#">item 0.4</a>
      </li>
    </ul>
  </li>
  <li id="removable">
    <a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
    <ul class="collapse">
      <li>
        <a href="#">item 1.1</a>
      </li>
      <li>
        <a href="#">item 1.2</a>
      </li>
      <li>
        <a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
        <ul class="collapse">
          <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>
        </ul>
      </li>
      <li>
        <a href="#">item 1.4</a>
      </li>
      <li>
        <a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
        <ul class="collapse">
          <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>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
    <ul class="collapse">
      <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>
    </ul>
  </li>
</ul>

Initialize the navigation with default settings.

document.addEventListener("DOMContentLoaded", function(event) {
  new MetisMenu('#example');
});

Available choices to customize the navigation.

document.addEventListener("DOMContentLoaded", function(event) {
  new MetisMenu('#example',{
      // selector of parent trigger
      parentTrigger: "li",
      // selector of submenu
      subMenu: "ul",
      // enable auto collapse
      toggle: true,
      // trigger element
      triggerElement: "a"
  });
});

Event handlers.

document.addEventListener("DOMContentLoaded", function(event) {
  new MetisMenu('#example')
    .on('show.metisMenu', function(event) {    
        console.log(event.detail.showElement);
    })
    .on('shown.metisMenu', function(event) {
        console.log(event.detail.shownElement);
     })
    .on('hide.metisMenu', function(event) {
        console.log(event.detail.hideElement);
    })
    .on('hidden.metisMenu', function(event) {
        console.log(event.detail.hiddenElement);    
    });
});

API strategies.

const mm = new MetisMenu("#menu");
// stop and destroy metisMenu
mm.dispose();
// update metisMenu
mm.update();

Multi-level Accordion/Dropdown Menu, metismenujs Plugin/Github, accordion menu with submenu, css accordion menu with submenu, css multi level dropdown menu

See Demo And Download