Breadcrumb

Best practices

When to use

Breadcrumbs are effective in products that have a large amount of pages in a hierarchy of more than two levels. They take up little space but still provide context for the user’s place in the navigation hierarchy.

When not to use

• Breadcrumbs are always treated as secondary and should never entirely replace a primary navigation.
• They shouldn’t be used for products that have single level navigation because they create unnecessary clutter.
• Breadcrumbs should not be used to to indicate a multistep process - use the Steps indicator instead.

Anatomy

1. Link: Directs users to the parent-level page
2. Overflow button: Excessive links truncate into an overflow button
3. Separator: Clearly distinguishes each page link
4. Current page: Indicates the current page name
5. Container: Handles max-width

Placement

Breadcrumbs are positioned in the top left portion of the page. They sit underneath the navigation bar, but above the page main content (cards, title etc.).

The component can be:

• used as a full width element (built-in width and padding)
• used either with a transparent background or with a subtle background.

Behaviour

Some sites have deep page structures combined with long page titles, which cause breadcrumb navigations to become excessively wide. To combat this:

• only the parent level of the current page should be visible
• all other breadcrumb links are collapsed and replaced by an “overflow button” (3 dots)

The tooltip is shown above the overflow button:

• when the user hovers over the overflow button
• when the user gives focus (keyboard) to the overflow button

Background

The Breadcrumb component can be used either with a transparent background or with a subtle background.

The component supports all container sizes/breakpoints. This means that the component has a container with the correct padding and is able to center itself correctly based on the chosen breakpoint.

Mobile behaviour

Breadcrumbs quickly grow too wide to fit on a single line on smaller mobile devices.
On mobile only one link to the parent page is shown.

Content guidelines

• Each breadcrumb link should be short and clearly reflect the location or entity it links to.
• Start with the highest level parent page and move deeper into the information architecture as the breadcrumb trail progresses.
• By default, the current page item is part of the breadcrumb trails.