Breadcrumb

Example

<nav class="sgds" aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">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. Home: Always the first item in the breadcrumb.
2. Separator: To give distinction between the breadcrumb items.
3. 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 8px horizontal spacing between the breadcrumb items.

Usage guidelines

Best practices:

1. Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.
2. When a ‘truncationWidth’ is specified, long item names will truncate and a tooltip containing the full item name will appear on hover. If unspecified, truncation will only occur when an item cannot fit alone on a line.

Breadcrumb should be used when:

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

Breadcrumb should not be used when:

1. The hierarchy is unclear: Breadcrumbs rely on a clear, linear structure. If your content doesn’t follow a well-defined hierarchy or has multiple access points, breadcrumbs can confuse users.
2. Your site has a shallow navigation structure, breadcrumbs are unnecessary and may clutter the UI.

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.

Behaviour
All the pages in the breadcrumb component should be interactive (except the current page) and link to their respective pages.

Accessibility guidelines

Aria attributes

1. Breadcrumb trail is contained within a navigation landmark region.
2. The landmark region is labelled via aria-label or aria-labelledby.
3. The link to the current page has aria-current="page". If the element representing the current page is not a link, aria-current is optional.

Keyboard accessibility

1. Tab or Shift-Tab to move between breadcrumb links.
2. Enter to activate the focused breadcrumb link.

Focus indicator

1. Ensure the breadcrumbs are in a logical tab order within the page content.
2. Use a different colour to clearly indicate focus. eg. other interactive breadcrumb links should be of a different colour from the current page.
3. Use aria-label on the navigation element to describe the type of navigation to screen readers.

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;