; return double ?

{single} {single}

: single; };

## Anatomy The Menu consists of four primary elements that work together to provide users with an actionable list of options.

1. Trigger 2. Popover 3. Menu item 4. Nested Menu item ## Options The Menu supports flat and nested configurations to accommodate various action list scenarios. ### Flat

### Nested

## Behavior The Menu responds to user interaction with distinct visual states and synchronized focus and hover behaviors. ### Visual States #### Default

#### Hover

#### Disabled

### Focusing Focus and hover states are synchronized. Moving the mouse over a menu item will automatically set focus to that item. Similarly, navigating through the menu with keyboard focus will trigger the hover state on the focused item. ## Usage Guidelines Use the Menu to provide multiple actions to the user. ### When not to use Use individual Buttons when there are fewer than five actions and they fit in the available space. [Page Header](/docs/web/components/page/design) is an exception to this, as it explicitly disallows this. ### Alternatives #### Menu vs Combobox The Menu is used to perform actions on the page, and sometimes also a navigational context. The Combobox is used for choosing an option amongst a list, usually in the context of a Form. #### Menu vs Popover When a list of actions need to take place, the Menu should be used. It is not recommended to recreate menu-like interactions through a Popover. ### How to Use #### Parent and Children Menu trigger should have direct relationship to its children. This also applies to the nested version of the Menu.

Nested menu example #### Disabled Handling * When an action is temporarily unavailable, use disabled state * When a user does not have the credentials to take action, do not display these unavailable actions to them. This avoids cluttering the UI and confusing the user when they are unable to take action. When a component is disabled, it is not interactive, meaning tooltips are not available to inform more. #### Grouping Menu does not allow for grouping. To group elements, use the Nested Menu. ## Content Content within the Menu should clearly communicate each action through descriptive labels. For content guidance, refer to the content guidance provided in the [Button](/docs/web/components/button/design). ## Keyboard Interaction Users can navigate the Menu using standard keyboard controls. ### Trigger | Key | Interaction | | ----------- | ------------------------------------------------------- | | Enter/Space | Opens the menu and places focus on the first menu item. | | Arrow Down | Opens the menu and moves focus to the first menu item. | | Arrow up | Opens the menu and moves focus to the last menu item. | ### Menu Item | Key | Interaction | | ----------- | ---------------------------------------------------------------------------------------------- | | Arrow Down | Focuses next menu item. | | Arrow Up | Focuses previous menu item. | | Arrow Right | If nested, opens the nested menu and places focus on the first nested menu item. | | Arrow Left | If focus is inside nested menu, closes the nested menu and places focus on the root menu item. |