Breadcrumb

A Tailwind CSS breadcrumb component for displaying navigation hierarchy.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-link">Components</a>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <span class="breadcrumb-page" aria-current="page">Breadcrumb</span>
</nav>

With collapsed items

Use a dropdown to show collapsed breadcrumb items.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <button
    type="button"
    class="breadcrumb-collapsed"
    data-sp-toggle="dropdown"
    data-sp-target="#breadcrumb-collapsed-menu"
    aria-expanded="false"
  >
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
    <span class="sr-only">More</span>
  </button>
  <div id="breadcrumb-collapsed-menu" class="dropdown">
    <a href="#" class="dropdown-item">Documentation</a>
    <a href="#" class="dropdown-item">Guides</a>
  </div>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-link">Components</a>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <span class="breadcrumb-page" aria-current="page">Breadcrumb</span>
</nav>

With icons

Add icons to breadcrumb links for additional visual context.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
    Home
  </a>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-link">Settings</a>
  <span class="breadcrumb-separator" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <span class="breadcrumb-page" aria-current="page">Profile</span>
</nav>

Custom separator

Use any separator by replacing the icon with text or another character.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <a href="#" class="breadcrumb-link">Components</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span class="breadcrumb-page" aria-current="page">Breadcrumb</span>
</nav>

How it works

The breadcrumb component is a CSS-only component for displaying navigation hierarchy.

Structure

A breadcrumb is a nav element containing links and separators:

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span class="breadcrumb-page">Current Page</span>
</nav>

Accessibility

For proper screen reader support, add these attributes:

Attribute	Description
`aria-hidden`	Add to separators to hide them from screen readers
`aria-current`	Add to the current page to indicate it's the current location

Separators are purely decorative - screen readers don't need to announce them.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span class="breadcrumb-page" aria-current="page">Current Page</span>
</nav>

Class reference

All available classes for the breadcrumb component.

Class	Description
`breadcrumb`	Add to `<nav>` element as the wrapper
`breadcrumb-link`	Add to `<a>` element for clickable links
`breadcrumb-page`	Add to `<span>` element for the current page
`breadcrumb-separator`	Add to `<span>` element for separators between items
`breadcrumb-collapsed`	Add to `<button>` element for collapsed items trigger

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-link">Link</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span class="breadcrumb-page">Page</span>
</nav>