Menu
Note
A interactive popover interface that contains a list of options or other input controls, used in conjunction with select fields and action buttons.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| ✔️ | Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
| ✔️ | Accessibility: Keyboard interactions | Includes descriptions of all keyboard interactions, focus indication and navigation order. |
| Accessibility: Text contrast | Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA). | |
| Accessibility: UI component contrast | Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA). | |
| Usage guidelines | Includes a list of recommended and discouraged usages. | |
| Content guidelines | Includes content standards and guidelines for how to write or format in-product content for the component. | |
| Internationalization | Includes support for various locales and bi-directionality (RTL). | |
| Design tokens | All design attributes (color, typography, layout, animation, etc.) are available as design tokens. |
Anatomy
Menu
- Container: The outermost encompassing element.
- Divider: A horizontal line that separates menu items or menu groups.
- Group label: A label that describes a group of menu items.
- Scroll buttons: A set of buttons that allows the user to scroll up or down through a list of menu items.
- Filter input: An optional search input field that allows the user to filter menu items.
Menu item
- Container: The outermost encompassing element.
- Icon: An optional visual element that represents the menu item.
- Label: The text that describes the menu item.
- Sublabel: An optional text that provides additional context for the menu item.
- Checkmark: A visual indicator that shows the selection state of the menu item.
- Checkbox: An alternative visual indicator that shows the selection state of the menu item.
- Radio: An alternative visual indicator that shows the selection state of the menu item.
States
Menu
Display states
Hidden
- The menu is not visible within the user interface and does not take up space.
Visible
- The menu is presented to the user to allow for interaction.
Menu item
Interaction states
Enabled
- Interaction with the menu item is available.
Hovered
- The cursor is currently positioned over the menu item, indicated by a different color shade and the pointer cursor.
Focused
- The menu item is focused via keyboard interaction, indicated by a ring outline.
Disabled
- Interaction with the menu item is disallowed, indicated by a muted appearance and the disallowed cursor.
Value states
Unselected
- The menu item is not currently selected, indicated by the lack of selection checkmark or an unchecked checkbox or radio input.
Selected
- The menu item is currently selected, indicated by a selection checkmark or a checked checkbox or radio input.
Filter input
This sub-component has the same states as [[Search input]].
Options
Options applied to a menu affect all of its menu items.
Layering
- Menus are available in default or alternative [[Layering]].
Grouping
- Menu items can be grouped together.
- Menu groups are separated by dividers.
- A label can be optionally added to a menu group.
Scroll buttons
- For menus where the number of menu items exceeds the available space, by default, scroll buttons are shown at the top and/or bottom of the menu to indicate that there are more items to view in the respective direction.
- The user may scroll through the menu items by clicking the scroll buttons.
Checkmark side
- Selection checkmarks can be positioned to the left or right of menu item labels.
- Left-side checkmarks are incompatible with icons.
Checkbox input
- Selection checkmarks can be replaced by checkbox inputs, suitable for use with multiple-choice select fields.
Radio input
- Selection checkmarks can be replaced by radio inputs, suitable for use with single-choice select fields.
Sublabel
- A sublabel can be optionally added below the menu item label to provide additional context.
Color
- Menu items are neutral-colored or achromatic by default.
- An accent color can be chosen via theme configuration and applied to menu items for enhanced visual emphasis.
Selection prominence
- Subtle: The background color of selected menu items has a low level of contrast in comparison to unselected menu items.
- Pronounced: The background color of selected menu items has a high level of contrast in comparison to unselected menu items.
Size
- Small and medium menu items differ in container height.
- Medium is the default menu item size.
Icon
- An icon can be optionally added to the left of the menu item label.
Filter input
- A filter input can be optionally added to the top of the menu to allow the user to filter for menu item labels that match the search query.
- A message is displayed when no matching menu items are found.
Behaviors
Label alignment
- The start position of all menu item labels are always aligned.
Text overflow
- When the menu item label is too long for the horizontal space available, it is truncated with an ellipsis.
Menu positioning
- Menus are positioned below the select field or action button that triggers them.
- If the menu would extend beyond the viewport, it is repositioned above the trigger element.
