Breadcrumb
Breadcrumbs help users to navigate and understand where they are on the current website or service.
Example
Anatomy
- Home: Always the first item in the breadcrumb.
- Seperator: To give distinction between the breadcrumb items.
- Item: Title of the pages which let’s users know the path they took to reach the current page. Should always be linked.
Spacing
Within the breadcrumb
Ensure that there is a min of 16px horizontal spacing between the breadcrumb items.
Usage guidelines
Breadcrumb should be used:
- When you want to enable users to understand their current position on the website.
- When you want to help users to move between different levels.
Breadcrumb should not be used:
- As a replacement for your primary navigation.
- For displaying progress such as when completing a transaction. In this case use the progress bar component.
Usability guidelines
Use complete page titles
The wording in the breadcrumb text should be the same as in the page title.
Consider the size
Generally the text for breadcrumbs are smaller, do ensure it is not too small to select.
Breadcrumb design tokens
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;