Skip to main content Skip to docs navigation

Breadcrumb

Indicate the current page's location within a navigational hierarchy using explicit divider elements.

GitHub Edit on GitHub
On this page

Example

Use an ordered list with .breadcrumb-item for each page and .breadcrumb-divider elements containing your separator icon. Add .active to the .breadcrumb-link of the current page.

HTML
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Library</a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Data</a>
    </li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor"><circle cx="2" cy="8" r="2"/><circle cx="8" cy="8" r="2"/><circle cx="14" cy="8" r="2"/></svg>
      </a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Documents</a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">2025</a>
    </li>
  </ol>
</nav>

Dividers

Dividers are added explicitly using .breadcrumb-divider elements. This gives you full control over the separator—use any SVG icon, text character, or custom content.

SVG dividers

Use inline SVG for crisp, scalable dividers that inherit currentColor for easy theming.

HTML
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Library</a>
    </li>
  </ol>
</nav>

Text dividers

For simple text-based dividers, just add the character directly.

HTML
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">/</li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Library</a>
    </li>
    <li class="breadcrumb-divider">/</li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Data</a>
    </li>
  </ol>
</nav>

Custom dividers

Use any content you like—different icons, decorative elements, or themed separators.

HTML
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">›</li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Library</a>
    </li>
    <li class="breadcrumb-divider">›</li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Data</a>
    </li>
  </ol>
</nav>

Accessibility

Since breadcrumbs provide navigation, it's important to follow these practices:

  • Add aria-label="breadcrumb" to the <nav> element to describe the navigation type
  • Add aria-current="page" to the .breadcrumb-item containing the current page
  • Divider elements are automatically hidden from assistive technology via CSS

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

CSS

Variables

Breadcrumbs use local CSS variables on .breadcrumb for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

SCSS
--breadcrumb-padding-x: #{$breadcrumb-padding-x};
--breadcrumb-padding-y: #{$breadcrumb-padding-y};
--breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
--breadcrumb-font-size: #{$breadcrumb-font-size};
--breadcrumb-bg: #{$breadcrumb-bg};
--breadcrumb-border-radius: #{$breadcrumb-border-radius};
--breadcrumb-divider-color: #{$breadcrumb-divider-color};
--breadcrumb-link-padding-x: #{$breadcrumb-link-padding-x};
--breadcrumb-link-padding-y: #{$breadcrumb-link-padding-y};
--breadcrumb-link-color: #{$breadcrumb-link-color};
--breadcrumb-link-hover-color: #{$breadcrumb-link-hover-color};
--breadcrumb-link-hover-bg: #{$breadcrumb-link-hover-bg};
--breadcrumb-link-active-color: #{$breadcrumb-link-active-color};
--breadcrumb-link-border-radius: #{$breadcrumb-link-border-radius};

Sass variables

SCSS
$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          var(--fg-4);
$breadcrumb-border-radius:          var(--border-radius);

$breadcrumb-link-padding-x:         .75rem;
$breadcrumb-link-padding-y:         .25rem;
$breadcrumb-link-color:             var(--fg-3);
$breadcrumb-link-hover-color:       var(--fg-2);
$breadcrumb-link-hover-bg:          var(--bg-1);
$breadcrumb-link-active-color:      var(--fg-1);
$breadcrumb-link-border-radius:     var(--border-radius-lg);