Menu
beta

A menu displays a list of actions on an elevated surface. It is triggered by a control.

1. Anatomy

The menu component is broken down into menu items and menu groups to make the complexity and flexibility manageable.

1.1 Menu

Aria attributes
Value
Purpose
role= “menu”
Indicates the role of the menu.
aria-expanded
Indicates that the container controlled by the disclosure button is visible.
aria-current
Indicates that the page referenced by the link is currently displayed.
aria-label
Name of the menu.
aria-controls
Name of the menu associated with the input.

1.2 Menu item

2. Configurations

2.1 Menu grouping

There are two types of menu: single-select and multi-select. They have different interactivity and behavior.

2.2 Menu item

Menu item is a smaller unit within the menu. It has 3 attributes that designers can customize the component: subtext, tags, and prefix. For prefix, a designer can choose either an avatar or an icon.

2.3 Width

There is a minimum width of 112px.

3. Behavior

3.1 Single select

Users can only click one item at a time. The menu disappears on click.

4. States

Menu has 3 states: initial, hover and focus.

5. Keyboard experience

5.1 Open a menu

5.2 Exit a menu

Below are the options if a user wants to exit the menu without selecting an option. The same interaction applies to both single and multi-select menus.

5.3 Move around the menu

5.4 Selecting an option

6. Screen reader experience

7. Resilience and responsiveness

7.1 Minimum width

Menu has a minimum width of 112px. The width does not take any value under 112px.

7.2 Text wrapping

Text expand as much as it can within the confines of the menu container and then starts wrapping to the next line.

8. Visual specs

8.1 Margin

8.2 Padding

8.2 Font size

8.3 Prefix size