Go to homepage

Projects /

Drop Menu

An animated dropdown navigation.

View Demo

Dependencies

How to

The Drop Menu component is a dropdown navigation list with support for nested lists and a search filter.

To connect the trigger (toggle button) to the navigation, make sure the first one's aria-controls value is equal to the second one's ID value.

For example:

<button aria-controls="drop-menu-id">Toggle navigation</button>

<div class="drop-menu js-drop-menu" id="drop-menu-id">
  <!-- ... -->
</div>

On smaller screens, the navigation is a full-screen modal. This behavior changes at the "small" breakpoint. 

The autocomplete plugin powers the search functionality. By default, the search filter looks for the elements with the .drop-menu__link class (links), while it skips the .drop-menu__btn elements (buttons controlling sub-lists).

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.