Responsive Multi-level Dropdown Menu For Navbar

Preview:

Description:

A Vanilla JavaScript library that makes it easier to create responsive, mobile-friendly, multi-level dropdown menus for the navbar of your cross-platform web app.

It provides a great navigation experience on mobile by collapsing the menu into a hamburger button. As a result, mobile users can easily browse all menu items by tapping the button & dropdown icon.

How to use it:

1. Download and install the package.

npm install

2. To test the script, just start the dev server on your computer.

npm run start

3. Generate files for production.

npm run build

4. Insert the main.css and main.js from the dist folder.

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

5. Insert the multi-level dropdown menu into your header navigation.

<header>
  <div class="nav__container">
    <div class="nav__mobile">
      <div class="nav__logo">LOGO</div>
      <div class="nav__btn">
        <a aria-label="Mobile menu" class="nav-toggle fade"><span></span><span class="mrg"></span><span class="mrg"></span></a>
      </div>
    </div>
      <nav class="menu-toggle">     
        <ul class="nav__menu">
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
          <li class="dropdown"><a href="#">Dropdown</a>
            <ul>
              <li><a href="">Dropdown item 1</a></li>
              <li><a href="">Dropdown item 2</a></li>
              <li><a href="">Dropdown item 3</a></li>
              <li class="dropdown second-level"><a href="#">2nd level dropdown</a>
                <ul>
                  <li><a href="">Dropdown item 1</a></li>
                  <li><a href="">Dropdown item 2</a></li>
                  <li><a href="">Dropdown item 3</a></li>
                </ul>
              </li>
              <li><a href="">Dropdown item 3</a></li>
              <li><a href="">Dropdown item 4</a></li>
            </ul>
          </li>
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
        </ul>   
      </nav>
  </div>
</header>

Changelog:

06/07/2021

• Fixed problem with dropdown on mobile