Anatomy
- Trigger: Element that triggers the Dropdown menu. Typically Button, or Icon Button.
- Popout: Popout container holding the menu items.
- Group: Set of actions or selectable options in the dropdown menu organized together because they share a related function or context. Group can include a title.
- Item: Single item that is a action or selectable option. Items can include leading or trailing visuals
- Selection indicator: An icon that highlights wether an option is selected.
Usage Guidelines
When to use this component
- You have more than 5 actions to display or the space is limited. Otherwise, use button group.
Present list of secondary actions: Use the dropdown menu to display contextual options when space is limited or when you want to reveal actions progressively.
Disambiguate a choice: When an action can have several outcomes, use the dropdown menu to let users clarify what they want to do e.g, selecting whether to import from a phone or a desktop.
Select or toggle an option: Use to select an option that changes the state immediately e.g, switching a user, changing a status, or toggling a setting e.g, modifying display options.
When not to use this component
- Do not use a dropdown for actions that don’t give instant result on the interface. Use Select or Combobox for selection fields inside forms.
- Do not use a dropdown for filtering. Use Filter component instead, as it provides better user experience and configurability
- Do not use a dropdown menu as a form input. Use the Select component instead.
Best Practices
Group actions based on related categories to make them easier to scan.
Do not use a dropdown menu to hide primary actions. They must never be hidden behind a dropdown menu.
List items in a logical order, for instance, sorted by frequency of use.
Don't use icons for decorative purposes or that don't portray the action. In those cases might be better to use text only.
Use icons for affordance clarity, to indicate status, or highlight the action that will be performed.
Don't mix trailing and leading icons inside the group. Be consistent to ensure scannability.
General Component Behaviors
Opening the dropdown menu
Menu can be opened by clicking on the trigger, or hitting enter or space when focused on the trigger.
Closing the dropdown menu
Menu can be closed in multiple ways:
- Clicking on an item
- Clicking outside of the dropdown popout
- Clicking on the trigger
- Pressing Esc key
Selectable Options
When selectable options are included in the dropdown, a space is reserved on the left for a selection indicator, shifting all items, both selectable and non-selectable, so they align consistently.
Action types
Default actions
Use default actions for regular options that are safe and reversible. They are displayed using the standard text and icon colors and do not visually stand out from the rest of the menu.
Examples: Edit, Duplicate, Share, View details.
Destructive actions
Use destructive actions for operations that may cause data loss or irreversible changes. Destructive actions are visually emphasized to help users recognize potentially risky operations and avoid accidental selection.
They are visually emphasized only on interaction; on hover and pressed, text and icons switch to a destructive (red) color.
Examples: Delete, Remove, Archive permanently, Reset settings.
Responsive Behavior
Dropdown menu adapts it’s visual design for mobile devices to improve clarity and tappable targets.
Destructive actions in responsive
In responsive context, destructive actions are displayed using the destructive color by default. This ensures the destructive intent is clearly visible during touch interactions, where hover feedback is not available and pressed states may be less noticeable.
Variants
Default
Selectable
Sizes
Small
Suitable for menus with simple actions with short labels and without supplementary visuals.
Medium (Default)
Suitable for most cases. Use it for simple actions or options with short to medium labels or if you need space for supplementary visuals.
Large
Use for actions or options with longer labels, or if you need space for bigger and more complex supplementary visuals.
Content Guidelines
For further information, see the Content Styleguide.
Research and Additional Reading
Known Gaps
- Accessibility Guidelines
- guidelines about the states of the component