Culture Amp
Menu
Also known as:
Menu listContext menuMenubar

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.

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.
    • The menu list contains a list of links, buttons, dividers, or subheading. 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.
  • Content:
    • For more than 6 menu items, chunk them into sections, separated by a content divider. Optionally, you may provide a subheading for each section.
    • Destructive actions are always at the end of the menu list.
    • For an overflow menu, use an icon button with a meatballs icon. Overflow menus appear on the right of page or section layouts so the menu list dropdown alignment shifts in the other direction.
    • Use a noun for the menu button text to describe the links and actions contained within.
  • Accessibility:
    • Ensure people using keyboards can open and close the menu by pressing the button and access links and buttons within the menu list.

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