Dropdown menu
The dropdown menu, referred to as ‘jump menu’ in AEM, allows the user to choose from a list of links that is usually hidden behind a button. The component is useful for compiling a list of link options such as states, products or assets and can be displayed in a single list. It helps shorten a page and allows users to quickly scan the links.
When to use
- For contextual longer lists of links for on page content
When not to use
- As a select input in a form
- As same page navigation with anchor links
- As part of global header or footer
Anatomy
- Access point: how a dropdown menu is triggered
- List item: either internal or external links
- Container: the container can only handle 1 column of items
Demos & variations
Mobile
In mobile the dropdown menu component width becomes 100% and fills the container it is placed in and the dropdown menu pushes content down vs. overlay.
Placement
Dropdown menus typically appear below their access point element but if they are in a position to be cut off by the browser or screen’s edge, the dropdown menu can instead appear above the element to avoid being cropped.
Behaviors
On desktop if there are multiple dropdown menus, only one can be opened at a time.
Mouse
- Hovering on access point should change the cursor
- Clicking on access point will open the dropdown menu
- Clicking outside of the dropdown menu will close it
Keyboard
- Tab to triggering element and hit enter to open
- Once user can tab through the list of links
- After they tab through the end of the list the dropdown menu will close or they can also hit esc key to close the dropdown menu
Content
Keep link labels short and concise, if longer labels are needed they should wrap to the next line with no truncation