Breadcrumb

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:

breadcrumb-usage-construction
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.

Behavior

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

breadcrumb-usage-behavior-location-based
Example for the levels of a breadcrumb with page title

Interaction

  • A clickable item contains a link to a page.

breadcrumb-usage-behavior-item-clickable
Pointer over clickable item

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

breadcrumb-usage-behavior-item-not-clickable
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.

breadcrumb-usage-behavior-item-current
Default cursor over current page item

  • A separator is not clickable.

breadcrumb-usage-behavior-item-current
Default cursor over separator

Do’s & Don’ts

breadcrumb-usage-start-do

breadcrumb-usage-start-dont

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

Overview

Item states

breadcrumb-style-overview-item-states
1. clickable, 2. mouseover, 3. pressed, 4. not clickable

breadcrumb-style-overview-item-states1
1. clickable, 2. mouseover, 3. not clickable (current page)

breadcrumb-style-overview-item-states2
1. clickable, 2. not clickable (structural container), 3. not clickable (current page)

Examples

breadcrumb-style-overview-example1
Breadcrumb with three clickable items and current page

breadcrumb-style-overview-example2
Breadcrumb without current page

Color

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

Typography

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 Roman 14px 20px left  
Item mouseover, pressed Siemens Sans Roman 14px 20px left Underline

Sizing and spacing

The following measurements show the dimensions for this component:

breadcrumb-style-sizing-item
Sizing for breadcrumb

breadcrumb-style-spacing-item-icon
Spacing for breadcrumb

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