Menu

A menu displays a list of multiple actions on a temporary surface. It appears when the user interacts with a button, tab or other control.

Usage

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.

General construction

A menu consists of the following elements:

menu-usage-construction
1. Menu control, 2. Menu, 3. Menu item, 4. Icon, 5. Label

  • 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.
  • The menu item includes a label and optionally an icon.

4. Icon

  • The icon emphasizes the label and matches the action.
  • The icon is optional.

5. Label

  • The label is mandatory.

Behavior

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.

menu-usage-behavior-elevation
Example menu position

Scrolling

If not all menu items fit into the visible area, a menu can be scrollable.

menu-usage-behavior-scrolling
Menu with scrolling behavior

Label ellipsis

Use an ellipsis, if a label exceeds the maximum width of the menu.

menu-usage-behavior-ellipsis
Label with ellipsis at the end

Overflowing behavior

Use the overflowing behavior if there is a space restriction, for example in the content header.

menu-usage-behavior-overflowing
Example overflowing behavior

Do’s & Don’ts

menu-usage-do-dont-visibility

  • 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.

Style

This chapter shows several menu styles in the design system.

Overview

menu-style-overview-states
Menu item states: 1. default, 2. focused, 3. mouseover, 4. pressed, 5. disabled

menu-style-overview-menu-icons
Menu with icons

menu-style-overview-overflowing-behavior
Overflowing behavior example

Color

The following table gives reference to the different colors and shades:

Name State Property Color name Modification
Label, Icon default Foreground color Gray 800  
Label, Icon disabled Foreground color Gray 800 Opacity 50%
Menu item default, disabled Background color White  
Menu item focused Border color Cool blue  
Menu item mouseover Background color Gray 100  
Menu item pressed Background color Gray 200  
Menu all Background color White  
Menu all Border color Gray 250  
Menu all Box shadow Black 0 2px 30px 0; rgba(0,0,0,0.25)

Typography

The following table gives reference to the different font sizes and weights:

Name State Font-family Font-size Line-height Text-align
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.

menu-style-sizing
Sizing for menu

menu-style-spacing
Spacing for menu

menu-style-spacing-shadow
Shadow layer

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top