Dropdown menu
Interactive elements that allow users to select a single option from a list.
Dropdown menus enable users to select an action from a list of options. They’re commonly used to save space by grouping related actions, or to provide actions in a confined space like a table column.
Also known as: Menu, select menu, command menu dropdown, actions drop-down, action menu, picker (IOS), menu (Android).
Anatomy
A. Button (required): Text or icon button used to open or close the dropdown menu.
B. Menu option (required): Individual option representing an action.
C. Divider (optional): Horizontal line used to group related actions.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Text button dropdown menu | When there’s sufficient space to provide a list of actions with a label. | As form input. Use select instead. |
| Icon button dropdown menu | When space is limited and an icon can accurately summarize the options in the list. | As form input. Use select instead. |
Best practices
- Group related actions together in the menu.
- Avoid using dropdown menus for critical actions that should be immediately available.
- Ensure icon buttons are recognizable so users can anticipate what actions are included in the menu.
- Include a scrollbar if menus are long and the container needs to have a maximum height.
- Avoid using a dropdown menu for navigation. If a dropdown menu needs to be used for navigation, follow guidance found in Link for “Styling and coding buttons and links.”
Do Use a dropdown menu to save space by grouping multiple related actions.
Don't Use dropdown menus for navigation unless it can’t be avoided.
Buttons vs. links
Dropdown menus are intended to be used for actions only, but it rare cases, they may contain links. Always consult with accessibility partners to ensure interactions are accessible for all users.
- Don’t mix buttons and links within a dropdown menu.
- Follow all guidelines for labeling links to ensure it’s clear what they do and where they lead.
Icon usage
Icons can be used in dropdown menus to make scanning easier and reinforce familiar ideas.
- Use icons consistently throughout the menu. For example, if you use icons for some options, use them for all.
- Ensure icons are relevant and easy to understand to avoid unnecessary visual elements.
Behaviors
Destructive actions
Destructive actions refer to actions that delete or remove data. Dropdown menus can contain destructive actions as necessary. For more information, reference Button guidelines.
Placement
Menus can align to either side of the button based on its placement in the interface.
Do Overlay page content when opening dropdown menus.
Don't Push content when opening dropdown menus.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation.
- Avoid abbreviations where possible.
- Limit labels to a few brief words to prevent unnecessary reflow.
- Follow all additional guidance found in Button for crafting action labels.
- Use parallel structure for menu option labels, either always starting with nouns or command verbs. Learn more about parallel structure in Grammar and punctuation.
