Breadcrumbs A semantic navigation aid that tracks user location within a site hierarchy. Built with Tailwind CSS and full WAI-ARIA support, it features smart default separator logic that automates layout while allowing for text or icon overrides. Improves site crawlability and UX for complex structures.
Basic Usage If no separator is provided, an arrow is shown between breadcrumb items automatically.
Copy Code
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="/" class="breadcrumb-link">Home</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current" aria-current="page">Current Page</span>
</li>
</ol>
</nav>Breadcrumb Separators Breadcrumb with Text Separator
Copy Code
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="/" class="breadcrumb-link">Home</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-separator">/</span>
<a href="/components" class="breadcrumb-link">Components</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current" aria-current="page">Badge</span>
</li>
</ol>
</nav>Breadcrumb with Icon Separator
Copy Code
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="/" class="breadcrumb-link">Home</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-separator">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</span>
<a href="/components" class="breadcrumb-link">Components</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-separator">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</span>
<span class="breadcrumb-current" aria-current="page">Button</span>
</li>
</ol>
</nav>Breadcrumb Accessibility To ensure breadcrumbs are accessible to screen readers:
Wrap the structure in a <nav> element with an aria-label="Breadcrumb". The last item (current page) should use aria-current="page" and preferably be a <span> rather than a link. Separators should be ignored by screen readers (often handled via CSS or aria-hidden="true" if using a physical element).