App bar

The app bar is used to switch between the different top-level views of an app.


When to use

Use the app bar in the following cases:

  • When there are two to seven top-level destinations. The recommended number of items is three to five.
  • When a quick navigation between unrelated destinations is necessary.

General construction

An app bar consists of the following elements:

1. App bar item, 2. Current page item, 3. Icon, 4. Label, 5. Item background, 6. App bar background

1. App bar item

  • There must be a minimum of two and a maximum of seven app bar items.

2. Current page item

  • There is always one current page item in the app bar.
  • It visually stands out from the default items.

3. Icon

  • The icon should be recognizable and emphasize the label below.

4. Label

  • The label should be short and descriptive.

5. Item background

  • The item background changes visually according to the different item states.

6. App bar background


General behavior

  • An app can only have one app bar.
  • The app bar must be available to the user whenever navigation is possible.
  • The app bar can be hidden in fullscreen forms, for example on edit pages.
  • The app bar can be scrolled vertically if there are more items in the viewport than visible.

Label behavior

  • Use short and precise labels.
  • If the label is too long, use a line break.
  • The height of the item increases according to the length of the label.
  • The label cannot be longer than three lines. Use an ellipsis at the end, if label is longer than three lines. Avoid long labels.
  • On mouseover, a tooltip shows the entire label.

1. One-line label, 2. Two-line label, 3. Three-line label with ellipsis and tooltip on mouseover


The app bar is placed in the local region.

Do’s & Don’ts



  • Use an app bar to provide quick access to top-level destinations in the app.
  • Do not use an app bar for sub-level navigation in the main region.


This chapter shows several app bar item styles in the design system.


The current item state can be emphasized by a solid icon style. It also has a vertical indicator line on the left side.

Item states: 1. default, 2. focused, 3. current, 4. mouseover, 5. pressed, 6. disabled

Labels of different lengths

In-app example


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

Name State Property Color name Modification
Label, Icon default Foreground color Gray 650  
Label, Icon focused Foreground color Black  
Label, Icon current Foreground color State blue 100  
Label, Icon mouseover, pressed Foreground color Black  
Label, Icon disabled Foreground color Gray 650 Opacity 40%
Item background default Background color Gray 100  
Item background focused Background color White  
Item background focused Border color Cool blue  
Item background current Background color White  
Item background mouseover Background color White  
Item background pressed Background color Gray 200  
Item background disabled Background color Gray 100  
App bar background all Background color Gray 100  


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 12px 14px center

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing and spacing for app bar

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