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:

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

Placement

The breadcrumb is usually located in the app header bar. It is placed above the page title.

breadcrumb-usage-behavior-position

Breadcrumb in a content header

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.

Style

This chapter shows several breadcrumb styles in the User Experience Toolkit.

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

Typography

The following table gives reference to the different font sizes and weights:

NameStateFont-familyFont-sizeLine-heightText-alignModification
ItemdefaultSiemens Sans Roman14px20pxleft 
Itemmouseover, pressedSiemens Sans Roman14px20pxleftUnderline

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

To see a detailed explanation of all existing helper and size classes, please refer to the usage table below.
Due to technical limitations, this CSS implementation does not support breadcrumb items ending in special characters.

Breadcrumb

<ul class="breadcrumb">
    <li class="breadcrumb__item">
        <a href="#">List Breadcrumb 1</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">List Breadcrumb 2</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">List Breadcrumb 3</a>
    </li>
    <li class="breadcrumb__item is-current">
        List Breadcrumb 4
    </li>
</ul>
<div class="breadcrumb">
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 1</a>
    </div>
    <div class="breadcrumb__item">
        Breadcrumb 2
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 3</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb 4</a>
    </div>
</div>

Breadcrumb overflow variants

<div class="breadcrumb">
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 1</a>
    </div>
    <div class="breadcrumb__item">
        Breadcrumb 2
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 3</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 4</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 5</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 6</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 7</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb X</a>
    </div>
</div>

<div class="breadcrumb breadcrumb--centered">
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 1</a>
    </div>
    <div class="breadcrumb__item">
        Breadcrumb 2
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 3</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 4</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 5</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 6</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 7</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb X</a>
    </div>
</div>

<div class="breadcrumb breadcrumb--right">
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 1</a>
    </div>
    <div class="breadcrumb__item">
        Breadcrumb 2
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 3</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 4</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 5</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 6</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 7</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb X</a>
    </div>
</div>

Usage

ElementClassDescription
.breadcrumb .breadcrumb__item Or any tag with .is-current Visually styles the currently selected / active breadcrumb item.
.breadcrumb .breadcrumb--centered "Cuts off" the breadcrumbs item between first and last breadcrumb item, shortened with ellipsis.
.breadcrumb .breadcrumb--right "Cuts off" the breadcrumbs item on the right, shortened with ellipsis.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top