Breadcrumbs
TailwindDisplays the current navigation hierarchy.
Stylesheets
Package
Source
Doc
Examples
Getting Started
Create an ordered list, apply the .breadcrumb
class, then set .crumb
and .crumb-separator
to each list item.
<ol class="breadcrumb">
<li class="crumb"><a href="/">Home</a></li>
<li class="crumb-separator" aria-hidden>›</li>
<li class="crumb"><a href="/articles">Articles</a></li>
<li class="crumb-separator" aria-hidden>›</li>
<li>Current</li>
</ol>
Non-Responsive
Breadcrumbs are responsive by default and will auto-hide all but the last two crumb elements on small screens. If you wish to
disable this behavior, replace .breadcrumb
with .breadcrumb-nonresponsive
.
<ol class="breadcrumb-nonresponsive">...</ol>
Using Icons
Add your icon before or after your anchor tag within the .crumb
list item.
<li class="crumb">
<span>(icon)</span>
<a href="/">Home</a>
</li>
Separators
Apply the .crumb-separator
class to each list item containing your separator icon or unicode symbol. Per accessability, make sure to implement aria-hidden
to hide this element from screen readers.
<li class="crumb-separator" aria-hidden>›</li>
<li class="crumb-separator" aria-hidden>(icon)</li>
Current Page
We recommend the last item not include an anchor link, as this indicates the page the user is currently on.
<li>Current</li>