A breadcrumb indicates the location of the user within a navigation's hierarchy.


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, 2. Separator, 3. Not clickable item (optional), 4. Current page (optional)

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.


The path shows every level from the first page of the application to the current page.

Example for the levels of a breadcrumb with page title


  • A clickable item contains a link to a page.

Pointer over clickable item

  • A not clickable item is just a structural level without reachable content.

Default cursor over not clickable item

  • The last item of a breadcrumb can indicate the current page. If so it is not clickable and displays the current page’s title.

Default cursor over current page item

  • A separator is not clickable.

Default cursor over separator

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.


This chapter shows several breadcrumb styles in the design system.


Item states

1. clickable, 2. mouseover, 3. pressed, 4. not clickable

1. clickable, 2. mouseover, 3. not clickable (current page)

1. clickable, 2. not clickable (structural container), 3. not clickable (current page)


Breadcrumb with three clickable items and current page

Breadcrumb without current page


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

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


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

Sizing for breadcrumb

Spacing for breadcrumb

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top