A menu offers the user a list of alternative actions. The actions can also be grouped in submenus.
Menu – live example
When to Use
- Menu: Container that is shown as an overlay.
- Menu item: List item inside the menu that represents an action.
- Separator (optional): Horizontal line that groups the menu items visually.
Anatomy of a menu
- Text: Describes the action that is triggered by the menu item. The text is mandatory.
- Icon (optional): Visualizes the action that is triggered by the menu item.
- Additional text (optional): Provides additional information relating to the menu item (such as shortcuts).
- 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.
Anatomy of a menu item
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.
- 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.