Dropdown

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

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news