A hoverable link that toggles the visibility of a dropdown list.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
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.