Breadcrumbs ​

Breadcrumbs is a secondary navigation element that shows a user's current location and a hierarchy among levels. It allows the user to move up to higher levels in the hierarchy or to a previous step.

On websites that have a lot of different pages, breadcrumb navigation can greatly enhance how users find their way around. In terms of usability, it reduces the number of actions a website visitor needs to take in order to get to a higher-level page.

It is also an effective visual aid that indicates the location of the user within the website's hierarchy, making it a great source of contextual information for landing pages.

Breadcrumbs overview

Usage guidelines ​

When to use ​
  • To show the user their current location in a website or app.
  • When the system has more than two levels in a hierarchy.
  • To allow the user to navigate up or to a higher level.
When not to use ​
  • If you only have one navigation level.
  • To replace a primary navigation.

Writing guidelines ​

Language The wording of the breadcrumbs is based on the main navigation.

Text length Each item name should be short and clearly reflect the location or entity it links to.

Specifications ​

Anatomy ​

Anatomy of Breadcrumbs
  1. Icon (optional): the icon adds a visual clue to the first item in the breadcrumbs.
  2. Separator: distinguishes between each page.
  3. Active item name: directs the user to the next higher level.
  4. Inactive item name: users current location in web or app

Variants ​

There are two types of breadcrumbs: with icon and text and only with text.

Variants from two to six items are available for both types. The icon is counted as one item.

Variants of breadcrumbs

Size ​

Breadcrumbs come in one size.

Styling ​

Breadcrumbs are available in a light and a dark theme.

When you use breadcrumb, make sure it stands out from the background and complies with accessibility guidelines.

Breadcrumbs Light Theme
Breadcrumbs Dark Theme

Behavior ​

Positioning and alignment ​

Breadcrumbs are usually located on top of the page/app or underneath the Stage and top left-aligned.

Leave a 48 px spacing from Breadcrumbs to the next item below.

Breadcrumbs positioned 48px from the element below
Breadcrumbs positioned 48px from the element below

Interaction ​

Breadcrumbs allow users to move up to higher levels in the hierarchy of a website or app.

The current page is always the last item on the right side and will be disabled. The user can navigate up to all enabled items on the left side. There is a limit of six items. To navigate from the current page/item upwards to a higher level, simply press on an item left to it.

Default state
Hover and press
Navigation to upper level
Long breadcrumbs ​

When a breadcrumb contains more than six items, the breadcrumb collapses and uses the ellipsis to indicate that information is hidden. The first and last items are shown by default. Users expand the breadcrumb by clicking on the ellipsis.

Docs image
Docs image
States ​

Breadcrumbs can display five states: default, hover, focus, pressed and disabled.

States of Breadcrumb

Accessibility guidelines ​

Color

  • Breadcrumbs must have appropriate contrast against the surrounding background. All the predefined background colors comply with accessibility WCAG AA guidelines.

Screen readers

  • Make sure your breadcrumb items reflect the page or product section titles exactly for screen readers.