Responsive Multi-level Dropdown Menu For Navbar

Category: Javascript , Menu & Navigation | June 7, 2021
Author:piotr-kmita
Views Total:14,255 views
Official Page:Go to website
Last Update:June 7, 2021
License:MIT

Preview:

Responsive Multi-level Dropdown Menu For Navbar

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

You Might Be Interested In:


3 thoughts on “Responsive Multi-level Dropdown Menu For Navbar

    1. Steve James

      A second dropdown on the main menu bar doesn’t work – it doesn’t fire the ‘.dropdown a’ event listener on mobile

      Reply

Leave a Reply