A menu is a self-contained list of actionable choices.
- Menu group
- Right icon
- Left icon
- Item label
- Menu item
Menus are essentially containers for menu items. By default, they include a basic menu item layout that can be configured for many common menu-based tasks. Custom layouts can be created and inserted to override the default preset.
The default menu includes a fairly flexible menu item that allows for the following icon and label combinations:
- Text only
- Left icon
- Right icon
- Both icons
Menu item types can be mixed and matched as needed.
Menu items can be one of two sizes to appropriately take advantage of space available to the menu and what’s required of the menu content.
Use medium menu items for context-specific menus such as card and dropdown menus.
Use large menu items for major menu systems within the UI such as navigation menus or for menus that have larger nested components or two rows of text.
A divider can be used between menu items to create visual separation or to help group similar options. The divider is made up of the divider component, thus allowing a user to set insets that can align to content within the item. The divider is not part of the menu item itself, but rather can be manually inserted as needed.
A menu will typically grow to accommodate the content within the menu. However, the menu component has a minimum width (see min-width property in structure section) to prevent collapsing down to an unrealistic width. This would be most noticeable for menus with items such as two-letter state abbreviations.
Related menu items can be grouped together to provide greater context, break up longer lists of items, and enhance scannability. Grouped items are preceded by a required non-interactive subheader. Single menu items and menu groups may be intermixed at the same level.
Standard keyboard interactions apply for elements within a menu.
- Tab: Tabbing through a menu stops and focuses on any interactive elements present. Continued tabbing will cycle back through the elements within the menu, not move focus to the next interactive element beyond the menu in the DOM.
- Return/Enter: Pressing the return key activates whichever interactive element is in focus.
- Escape: Pressing the escape key closes the menu (if it is part of an overflow or other triggered menu aside from form dropdowns).
- Arrow keys: Arrow keys have no effect on navigation within the menu apart from browser-based defaults.
When hovered over a menu item, the cursor should change to a pointer.