Menu beta
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.
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
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.