How to make use of it:

1. Load the jQuery library and Material Icon within the document.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Load the Dropdown Navigation’s JavaScript and Stylesheet.

<link rel="stylesheet" href="dist/style.css" />
<script src="app.js"></script>

3. Define your menu objects in a JS array as displayed below.

let menuList = [
    {
        title: "Home",
        url: "#"
    },
    {
        title: "About",
        url: "#"
    },
    {
        title: "SubMenu",
        url: "#"
    },
    {
        title: "SubMenu-1",
        url: "#"
    },
    {
        title: "SubMenu-1-1",
        url: "#"
    },
    {
        title: "SubMenu-1-2",
        url: "#"
    },
    {
        title: "SubMenu-2",
        url: "#"
    },
    {
        title: "Contact",
        url: "#"
    }
];

4. Code the HTML structure for the dropdown navigation.

<header>
  <nav class="sd-nav-menu">
    <div class="sd-menu-header">
      <div class="sd-desktop-menu">
      </div>
      <button class="sd-menu-toggle">
        <i class="material-icons">menu</i>
      </button>
    </div>
    <div class="sd-mobile-menu">
    </div>
  </nav>
</header>

5. Initialize the plugin of the menu checklist to the dropdown navigation.

let $ = jQuery;
    $(".sd-desktop-menu").addMenu(menuList);
    $(".sd-mobile-menu").addMenu(menuList);
    $().mobileMenuInit();

See Demo And Download