Breadcrumb

Example

 
<nav class="cgds" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

        

Anatomy

1. Icon: Give users visual guides for navigating across the sections.
2. Start Page: Always the first item in the breadcrumb.
3. Separator: To give distinction between the breadcrumb items.
4. Item: Title of the pages which let 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 8px horizontal spacing between the breadcrumb items.

Usage guidelines

Breadcrumb should be used:

1. When you want to enable users to understand their current position on the website.
2. When you want to help users to move between different levels.

Breadcrumb should not be used:

1. As a replacement for your primary navigation.
2. 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 is smaller, do ensure it is not too small to select.

Card 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: $highlight !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;