An animated dropdown navigation.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
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.
<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.
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).