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

Behavior

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.

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

Placement

The app bar is placed in the local region.

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.
  • Do not 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 solid 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

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