Breadcrumb

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.