Breadcrumb
A breadcrumb indicates the location of the user within a navigation's hierarchy.
Usage
When to use
Use a breadcrumb in the following cases:
- When the app has more than two navigation levels.
- When there is a large amount of hierarchically structured content.
General construction
A breadcrumb consists of the following elements:
1. Clickable item
- Each item represents a single section in a hierarchical path.
- A clickable item contains a link to its corresponding page in the hierarchy. The text of the item is the same as the title of the destination page.
2. Separator
- It separates the breadcrumb items from each other.
3. Not clickable item (optional)
- A not clickable item is a structural container in the hierarchy which is not reachable by the user.
4. Current page (optional)
- The current page is the last item of the breadcrumb.
- It is a not clickable item.
Behavior
Breadcrumb
The path shows every level from the first page of the application to the current page.
Interaction
- A clickable item contains a link to a page.
- A not clickable item is just a structural level without reachable content.
- The last item of a breadcrumb can indicate the current page. If so it is not clickable and displays the current page’s title.
- A separator is not clickable.
Placement
The breadcrumb is usually a part of the content header in the main region. It is placed above the page title.
Do’s & Don’ts
- Show a breadcrumb only when hierarchical navigation is possible.
- Do not use a breadcrumb if the navigation’s hierarchy contains only one level.
Style
This chapter shows several breadcrumb styles in the design system.
Overview
Item states
Examples
Color
The following table gives reference to the different colors and shades:
| Name | State | Property | Color name |
|---|---|---|---|
| Item clickable | default | Foreground color | State blue 100 |
| Item clickable | mouseover | Foreground color | Cool blue |
| Item clickable | pressed | Foreground color | State blue 250 |
| Item not clickable | – | Foreground color | Gray 400 |
| Separator | – | Foreground color | Gray 200 |
Typography
The following table gives reference to the different font sizes and weights:
| Name | State | Font-family | Font-size | Line-height | Text-align | Modification |
|---|---|---|---|---|---|---|
| Item | default | Siemens Sans Regular | 14px | 20px | left | |
| Item | mouseover, pressed | Siemens Sans Regular | 14px | 20px | left | Underline |
Sizing and spacing
The following measurements show the dimensions for this component:
