When to use
Use menus in the following cases:
- To display a preconfigured list of actions.
- If there are multiple actions in a limited space.
A menu consists of the following elements:
1. Menu control
- A menu control can be a button, tab or other control which has more than one action to choose from.
- The menu appears when a user interacts with a menu control.
- It contains the menu items.
3. Menu item
- The menu item includes a label and optionally an icon.
- The icon emphasizes the label and matches the action.
- The icon is optional.
- The label is mandatory.
Position and elevation
A menu appears in front of all other permanent UI elements and typically below the menu control. It behaves according to the window bounding. Make sure that it is placed in the visible area of the screen.
If it is in a position to be cut off by the browser or screen’s edge, the menu can instead appear to the left, right, or above the menu control.
If not all menu items fit into the visible area, a menu can be scrollable.
Use an ellipsis, if a label exceeds the maximum width of the menu.
Use the overflowing behavior if there is a space restriction, for example in the content header.
Do’s & Don’ts
- Always place the menu next to the menu control in the visible area of the screen.
- Do not position and align the menu to be truncated or invisible.
This chapter shows several menu styles in the design system.
The following table gives reference to the different font sizes and weights:
|Label||all||Siemens Sans Regular||14px||20px||left|
Sizing and spacing
The following measurements show the dimensions for this component:
The label length of the longest menu item determines the width of the menu. If the menu item exceeds the maximum width it will be truncated.
The maximum height of a menu should be at least one item less than the height of the app’s UI.