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
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need 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.