App bar

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

Usage

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:

app-bar-usage-construction
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 at least 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

Behavior

General behavior

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

Label behavior

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

app-bar-usage-behavior-long-labels
1. One-line label, 2. Two-line label, 3. Three-line label with ellipsis and tooltip on mouseover

Do’s & Don’ts

app-bar-usage-do

app-bar-usage-dont

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

Style

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

Overview

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

app-bar-style-overview-item-states
Item states: 1. default, 2. focused, 3. current, 4. mouseover, 5. pressed, 6. disabled

app-bar-style-overview-long-labels1
Labels of different lengths

app-bar-style-overview-example1
In-app example

Color

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

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  

Typography

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

Name State Font-family Font-size Line-height Text-align
Label all Siemens Sans 12px 14px center

Sizing and spacing

The following measurements show the dimensions for this component:

app-bar-style-sizing
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