Menu

A menu contains links to places or button actions. It does NOT show a selected item at all and the menu button text never changes.

Also known as:
Menu listContext menuMenubar

AnchorNeed to know

  • If a menu dropdown contains a mix of links and buttons, separate them with a content divider with links at the top and buttons at the bottom.

Visuals

UI Kit

To keep in mind

A menu provides access to additional actions and navigation links on demand while preserving a minimal interface.

Anatomy

  • The menu button can be any of our standard button components to open the menu, including an Icon Button for an overflow menu (see below).
  • The menu list contains a list of links, buttons, dividers, or subheadings. Visually, it is bounded by a similar dropdown container to our autocomplete and select components. It may also be referred to as a menu dropdown.

Overflow menu

  • An overflow menu is used to bundle multiple related or infrequently used actions. It helps to declutter the interface.
  • Use an overflow menu if you are short on space / screen real estate.
  • Consider using an overflow menu if you are presenting too many actions (E.g. more than 3) in the same row/space.
  • For an overflow menu, use an icon button with meatballs icon (i.e. three horizontal dots).
  • Overflow menus generally appear on the far right (in left-to-right languages) of a page or section layouts, to define a consistent location for users to look for.
  • Because overflow buttons (meatballs) are generally found on the right edge (in left-to-right languages) of a page, the menu list will need to align to the right edge (in left-to-right languages) of the icon button, so that the menu faces inward towards the content area, and doesn't appear outside of the content area.

Content

  • A menu list should contain more than 1 action/link. If not, consider exposing these as individual actions.
  • For more than 6 menu items, chunk them into sections, separated by a content divider. Optionally, you may provide a subheading for each section.
  • Actions must be indicated with an icon. Links do not have an icon.
  • Action icons always live on the left of the action menu button.
  • Destructive actions are always at the bottom of the menu list using the destructive menu link style (see example).

Accessibility

  • Ensure people using keyboards can open and close the menu by pressing the button and access links and buttons within the menu list.

Copy guidelines

  • Use a noun for the menu button text to describe the links and actions contained within.

When to use and when not to use

When to use
  • Use a menu when there are link and button options available that are not used enough to show by themselves.
When not to use
  • When an option from the list becomes "selected", use a Select instead.
  • If there are only 2 list items, show them immediately inline instead of using a menu.
  • If you think you need 10 options, reconsider information architecture, page structure, and task flows to avoid including that many items in a menu.

External links