Skip to main content

Dropdown menu

Last updated:
10/17/2023

A dropdown menu contains a list of actions or navigation items that are shown in an expandable menu.

View in Storybook

Modifiers

With section headers

Use section headers to categorize menu actions. Only use section headers if you can separate all of the actions into categories. Users cannot interact with the section header text.

With highlighted action

Highlight an action that is more important than the rest of the actions. You can only highlight one action with this style.

With icons

Only use icons if they are necessary and if there is an icon for each action in the menu.

Styles

Default

Use the default style when the dropdown menu is not the primary action on the page.

Assertive

Use the assertive style when the dropdown menu is the primary action on the page. There should be only one assertive dropdown menu on the page.

Ghost

Use the ghost style when the dropdown menu is on a dark background. Make sure that the dropdown menu trigger passes accessibility requirements of AA, and AAA when possible.

Subtle

Use the subtle style to de-emphasize the dropdown menu.

Usage

Do:

  • Use a dropdown menu for navigation menus or action menus
  • Use a dropdown menu if you have around five to 15 items to choose from
  • Group related items together under section headers if you have a long list of items
  • Order items logically — either by most selected or alphabetically
  • Use an icon button as a dropdown menu trigger, but only if you’re low on space or if the menu should be de-emphasized
  • Highlight a single important or over-arching action or item, if necessary

Don't:

  • Use a dropdown menu if the user needs to select something, use a select instead
  • Mix item types (links and actions) unless their function is obvious to the user
  • Overload a dropdown menu — re-evaluate the experience if you have 15-plus items to choose from
  • Add icons only for decoration or if only a few items have corresponding icons — only use icons when necessary and if all items have icons

Content guidelines

Do:

  • Use sentence case for item and section header text
  • Use parallel syntax when writing item text
  • Group items logically if there are is a long list of items
  • Use short, concise language for item text
  • Use short, concise language for section headers
  • Use verbs for actions
  • Use nouns for links, in most cases
  • Append invisible text to the end of the dropdown menu trigger text, if necessary

Don't:

  • Include punctuation at the end of menu items
  • Use title case or all caps
  • Disable a link
  • Use icons as decoration
  • Add invisible text in the middle of dropdown menu trigger text

User research

Key takeaways

Keep it simple and contextual

Ensure that your dropdown menu design is familiar, visible, clear, useful, and easy to interact with. Ensure that the menu items are easy to scan, relevant, and use consistent terms and language.

No sources

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that the menu is fully accessible.

For more information on dropdown menus, see WAI-ARIA Authoring Practices for menus.

For more information on dropdown menu buttons, see WAI-ARIA Authoring Practices for menu buttons.

For more information on keyboard and voice navigation, see Deque’s screen reader keyboard shortcuts and gestures documentation.