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:
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.
Placement
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.
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.
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 Roman | 12px | 14px | center |
Sizing and spacing
The following measurements show the dimensions for this component: