🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


A hoverable link that toggles the visibility of a dropdown list.

Copy: 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 Dropdown component is a navigation element containing a list of related links whose visibility is controlled by the dropdown trigger (unlike the Menu component, which toggles the visibility of a set of functionalites/buttons).

It's often used to group and hide secondary navigations (e.g., when used inside the main-header component). The trigger is a link itself: the user can click on any item of the dropdown, and move to another page.

Assistive technologies will see this component as a list of links. The aria-label="submenu" attribute is used to notify the user they're moving into a sub-menu.

⚠️ Make sure to use sub-menus with caution: anytime you create a sub dropdown (nested <ul>) you're forcing users using assistive technologies to navigate through all your subitems. A sub sub dropdown becomes a maze.

This component uses the Diagonal Movement component to differentiate between users trying hover over a dropdown item and user trying to navigate into a submenu's content.


✅ Project duplicated

✅ Project created

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