⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →


Progress value is 30%

Drop Menu

An animated dropdown navigation.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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">
  <!-- ... -->

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).

Project duplicated

Project created

Globals imported

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