Breadcrumbs

1. Example & HTML Structure

Default

On Blue

The following example shows the HTML structure of the Breadcrumbs component.

<div class="bt1d-breadcrumbs">
  <div class="bt1d-breadcrumbs__inner">
    <span class="bt1d-breadcrumbs__item">
      <a class="bt1d-breadcrumbs__link" href="https://example.com/">Home</a>
    </span>
    <span class="bt1d-breadcrumbs__separator"></span>
    <span class="bt1d-breadcrumbs__item">
      <a class="bt1d-breadcrumbs__link" href="https://example.com/news-and-updates/">News and Updates</a>
    </span>
    <span class="bt1d-breadcrumbs__separator"></span>
    <span class="bt1d-breadcrumbs__item" aria-current="page">Article Title</span>
  </div>
</div>

2. Key Classes

• bt1d-breadcrumbs: The main wrapper for the breadcrumbs, which contains the breadcrumb items and separators.
• bt1d-breadcrumbs__inner: Wraps the breadcrumb items and separators, providing a flexible layout.
• bt1d-breadcrumbs__item: Represents each individual breadcrumb item. If the item is the current page, the aria-current="page" attribute is used for accessibility.
• bt1d-breadcrumbs__link: The link class applied to breadcrumb items that are clickable. This class ensures proper styling and hover effects for the links.
• bt1d-breadcrumbs__separator: The separator between each breadcrumb item, usually represented as a slash or other visual indicator.

4. Customization with Utility Classes

The Breadcrumbs component supports customization using the system’s utility classes for background and text colors. These classes are not applied by default but can be added to meet specific design requirements.

Example with Utility Classes

<div class="bt1d-breadcrumbs bt1d-blue-background-color bt1d-text-color--light">
  <div class="bt1d-breadcrumbs__inner">
    <!-- Breadcrumb items go here -->
  </div>
</div>