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.
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.
- The icon should be recognizable and emphasize the label below.
- 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
- 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.
- 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.
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.
The following table gives reference to the different font sizes and weights:
|Label||all||Siemens Sans Regular||12px||14px||center|
Sizing and spacing
The following measurements show the dimensions for this component: