Dropdown
A hoverable link that toggles the visibility of a dropdown list.
Projects /
Projects /
A hoverable link that toggles the visibility of a dropdown list.
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.
The Dropdown component has been designed to reveal the list of related links only for users with a pointing device (e.g., mouse).
On touch devices, the dropdown link behaves like a standard link. This prevents the double-tap issue (first tap -> reveal the dropdown link; second tap -> redirect the user to the selected page).
If you want the Dropdown to have the same behavior on touch devices as well, you can remove the pointer media feature from the component style file:
@media (pointer: fine) { // 👈 remove pointer media feature
/* CSS code */ // 👈 don't delete the CSS code
}
