Back to components
Dropdown Menu
A Dropdown Menu offers a list of actions, links or functions that a user can access.
Table of Contents
Edit this section, Opens in new windowOverview
A Dropdown Menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Usage
A Dropdown Menu is mostly used from either a navigation control or a button control.
Behaviours
Interactions
Hover
When hovered, the menu item is filled with BE 1, DARK BEIGE.
Focus
2px
dotted outline
with 2px
outline-offset
with
color BL 1, BLUE.
Anatomy
- Subtle border and shadow
- A disabled action (optional)
- Hovered menu item
- Keyboard shortcut (optional)
- A separator (optional)
- Default menu item
- A parent item (optional)
- Action icon (optional)
Sub menu
- Sub menu opens up from action
- Stronger font for emphasized active item
- Check mark for active item