A menu offers the user a list of alternative actions. The actions can also be grouped in submenus.

Menu – live example

When to Use

Use the menu:

• If you need to offer more than one action.
• If users need to stay in a certain context.
• If there are only a small number of actions.

Don’t use the menu:

• To provide only one option. Use a button instead.
• If users would benefit more from a split button, which offers an easy-to-access default action, with the option to select other actions.

Anatomy

Menu

1. Menu: Container that is shown as an overlay.
2. Menu item: List item inside the menu that represents an action.
3. Separator (optional): Horizontal line that groups the menu items visually.

Menu Item

1. Text: Describes the action that is triggered by the menu item. The text is mandatory.
2. Icon (optional): Visualizes the action that is triggered by the menu item.
3. Additional text (optional): Provides additional information relating to the menu item (such as shortcuts).
4. Navigation indicator: Indicates that a submenu is available for the menu item.

The visualization of the menu item adapts automatically, depending on which elements are included.

Variants

The menu can be basic, with only a single list of options, or can contain menu items with submenus.

The elements within a menu item can be combined in various ways. The minimal variant is to show only a text. If a menu item has subitems, an additional text won’t be shown, since the space is needed for the navigation indicator.

Variants Without Icons

• Text only
• Text and additional text
• Text and navigation indicator (subitems)

Menu item variants without icons – live examples

(from top to bottom: text only, with additional text, with navigation indicator)

Variants with Icons

• Icon and text
• Icon, text, and additional text
• Icon, text, and navigation indicator (subitems)

Menu item variants with icons – live examples

(from top to bottom: icon and text only, with additional text, with navigation indicator)

Behavior and Interaction

Initially, the menu is closed and therefore not visible.

• Clicking the reference control opens the menu (for example, a menu button).
• Clicking a menu item without submenu indicator triggers the respective action.
• Clicking a menu item with a submenu indicator opens the submenu next to the main menu. The cursor can now be moved to the submenu while all other levels remain open. For each submenu, the same navigation principles apply as for the main menu. Multiple submenus are possible.
• Clicking outside the component closes the menu.

Menu behavior and interaction – live example

Related Links