Drop Menu

An animated dropdown navigation.

Dependencies

• Animated Menu Button
• Circle Loader
• Autocomplete

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. 

Search and autocomplete #

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

• Navigation > Side Nav
• Overlays

Bug report & feedback

Component Github page ↗