Breadcrumb

A breadcrumb is like a digital trail of crumbs, guiding users through the labyrinth of a website. It's a handy navigation tool that helps users keep track of their location within a site's hierarchy. With breadcrumbs, users can easily retrace their steps and find their way back to the homepage or a previous page.

Example

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

  • Breadcrumb 1
<nav aria-label="Breadcrumb">
    <ul class="breadcrumb">
        <li class="item"><a href="#" class="link">Home</a></li>
        <li class="item">
            <svg-circle/>
        </li>
        <li class="item"><a href="#" class="link">Library</a></li>
        <li class="item">
            <svg-circle/>
        </li>
        <li class="item active" aria-current="page">Data</li>
    </ul>
</nav>
@use '~/styles/app.scss' as app;

$breadcrumb: app.get-theme(app.$theme, 'components.breadcrumb');

@include app.generate-component(
  $breadcrumb,
  'breadcrumb',
  app.$config,
  app.$theme
);
customElements.define("svg-circle", class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
               fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
          </svg>`;
  }
});

Dividers

Dividers are automatically added in CSS through ::before and content . They can be changed by modifying a local CSS custom property --xii-breadcrumb-divider, or through the $breadcrumb-divider Sass variable โ€” and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

  • Breadcrumb 2
<nav aria-label="breadcrumb">
    <ul class="breadcrumb">
        <li class="item"><a href="#" class="link">Home</a></li>
        <li class="item">
            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
                 fill="currentColor"
                 aria-hidden="true">
              <path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
            </svg>
        </li>
        <li class="item active" aria-current="page">Library</li>
    </ul>
</nav>
@use '~/styles/app.scss' as app;

$breadcrumb: app.get-theme(app.$theme, 'components.breadcrumb');

@include app.generate-component(
  $breadcrumb,
  'breadcrumb',
  app.$config,
  app.$theme
);

Example with Schema

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

  • Breadcrumb 3
<nav aria-label="Breadcrumb">
    <ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
        <li class="item" itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <a href="#" class="link" itemprop="item">
                <span itemprop="name">Home</span>
            </a>
            <meta itemprop="position" content="1"/>
        </li>
        <li class="item">
            <svg-circle/>
        </li>
        <li class="item" itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <a href="#" class="link" itemprop="item">
                <span itemprop="name">Library</span>
            </a>
            <meta itemprop="position" content="2"/>
        </li>
        <li class="item">
            <svg-circle/>
        </li>
        <li class="item active" aria-current="page" itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <span itemprop="name">Award winners</span>
            <meta itemprop="position" content="3"/>
        </li>
    </ul>
</nav>
@use '~/styles/app.scss' as app;

$breadcrumb: app.get-theme(app.$theme, 'components.breadcrumb');

@include app.generate-component(
  $breadcrumb,
  'breadcrumb',
  app.$config,
  app.$theme
);
customElements.define("svg-circle", class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>';
  }
});

Accessibility

Since breadcrumbs provide a navigation, itโ€™s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the ARIA Authoring Practices Guide breadcrumb pattern .