Modern Multi-level DropDown Menu – Droppy

Preview:

Description:

Droppy is a pure JavaScript library that helps you generate modern, animated, customizable, multi-level dropdown menus.

How to use it:

1. Install and import the Droppy.

# NPM
$ npm install droppy-menu

import Droppy from '@/droppy-menu/src/droppy.js';

<!-- OR -->
<script defer type="module" src="/src/droppy.js"></script>

2. Insert your hierarchical menu data into nested html lists as follows:

<nav data-menu>
<ul class="menu">
  <li class="menu-item">
    <a href="#"><span>Prodotti</span></a>
    <ul class="menu">
      <li class="menu-item"><a href="#">Economici</a></li>
      <li class="menu-item">
        <a href="#">Costosi</a>
        <ul class="menu">
          <li class="menu-item"><a href="#">Nuovo</a></li>
          <li class="menu-item"><a href="#">Usato</a></li>
        </ul>
      </li>
      <li class="menu-item"><a href="#">Via di mezzo</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">Novità</a>
    <ul class="menu">
      <li class="menu-item"><a href="#">Aprile</a></li>
      <li class="menu-item"><a href="#">Marzo</a></li>
      <li class="menu-item"><a href="#">Febbraio</a></li>
      <li class="menu-item"><a href="#">Gennaio</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">Azienda</a>
    <ul class="menu">
      <li class="menu-item"><a href="#">Chi siamo</a></li>
      <li class="menu-item"><a href="#">Dove siamo</a></li>
      <li class="menu-item"><a href="#">Cosa facciamo</a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="#">Contatti</a></li>
</ul>
</nav>

3. Style your dropdown using CSS.

li > .dropdown {
  display: none;
  /* more styles here */
}

4. Initialize the Droppy.

const trigger = document.querySelector('li > a');
const dropdown = document.querySelector('li > ul');
const droppy = new Droppy(trigger, dropdown, {
  // Options...
});

5. All default configuration options.

const droppy = new Droppy(trigger, dropdown, {
  animationIn: '',
  animationOut: '',
  display: 'block',
  triggerActiveClass: 'active',
  preventDefault: false,
});

6. API methods.

droppy.show(); 
droppy.hide(); 
droppy.toggle();

Changelog:

v2.2.1 (04/04/2025)

• Adds Promise to show() and hide() methods.
• Adds modalGenerator function.

v2.2.0 (03/14/2025)

• Adds beforetoggle and toggle events.
• Adds tabsGenerator function.
• Adds triggerActiveClass to DroppyOptions.
• Renames generator to menuGenerator.
• Removes clickAwayToClose from DroppyOptions.
• The DroppyContext no longer registers the click handler used for the ‘click away’ functionality.