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" 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"></path></svg>
</span>
<a href="#" class="breadcrumb-link">Components</a>
<span class="breadcrumb-separator" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</span>
<span class="breadcrumb-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" 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"></path></svg>
</span>
<div class="dropdown flex items-center">
<button
type="button"
class="breadcrumb-collapsed"
data-sp-toggle="dropdown"
aria-expanded="false"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
<span class="sr-only">More</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Documentation</a>
<a href="#" class="dropdown-item">Guides</a>
</div>
</div>
<span class="breadcrumb-separator" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</span>
<a href="#" class="breadcrumb-link">Components</a>
<span class="breadcrumb-separator" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</span>
<span class="breadcrumb-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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><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"></path></svg>
Home
</a>
<span class="breadcrumb-separator" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</span>
<a href="#" class="breadcrumb-link">Settings</a>
<span class="breadcrumb-separator" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</span>
<span class="breadcrumb-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">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>