breadcrumb component
Drop-in semantic component. See examples, sizes, variants, and source.
Hierarchical path navigation. Wrap a flat sequence of
a links and a final
div in breadcrumb,
with i.icon.chevron-right (or a
.separator) between segments.
Apply size (xs, sm,
xl, lg) or intent
(primary, positive,
negative, etc.) modifiers to recolor the
whole trail. Pure CSS — no JS.
Breadcrumb Sizes
Breadcrumb Sizes
<div class="stack">
<div class="breadcrumb xs">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Tiny</div>
</div>
<div class="breadcrumb sm">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Small</div>
</div>
<div class="breadcrumb">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Default</div>
</div>
<div class="breadcrumb xl">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Large</div>
</div>
<div class="breadcrumb lg">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Big</div>
</div>
</div>
Basic Breadcrumbs
Basic Breadcrumbs
<div class="breadcrumb">
<a href="#"><i class="icon house h-4 w-4"></i></a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Electronics</div>
</div>
Breadcrumbs with Icons
Breadcrumbs with Icons
<div class="breadcrumb">
<a href="#">
<i class="icon settings"></i>
Settings
</a>
<i class="icon chevron-right"></i>
<a href="#">
<i class="icon bell"></i>
Notifications
</a>
<i class="icon chevron-right"></i>
<div>
<i class="icon mail"></i>
Email Notifications
</div>
</div>
Text Only Breadcrumbs
Text Only Breadcrumbs
Home
Blog
The Power of Minimalism in Design
<div class="breadcrumb">
<a href="#">Home</a>
<i class="icon chevron-right"></i>
<a href="#">Blog</a>
<i class="icon chevron-right"></i>
<div>The Power of Minimalism in Design</div>
</div>
Slash Separator
Slash Separator
<div class="breadcrumb">
<a href="#">Home</a>
<div class="separator">/</div>
<a href="#">Products</a>
<div class="separator">/</div>
<div>Electronics</div>
</div>
Colored Breadcrumbs
Colored Breadcrumbs
<div class="stack">
<div class="breadcrumb primary">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Primary</div>
</div>
<div class="breadcrumb positive">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Positive</div>
</div>
<div class="breadcrumb negative">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Negative</div>
</div>
<div class="breadcrumb warning">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Warning</div>
</div>
<div class="breadcrumb purple">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Purple</div>
</div>
<div class="breadcrumb teal">
<a href="#"><i class="icon house"></i> Home</a>
<i class="icon chevron-right"></i>
<a href="#">Products</a>
<i class="icon chevron-right"></i>
<div>Teal</div>
</div>
</div>
Class API Reference
| Type |
Class |
Usage |
Notes |
| Base |
breadcrumb |
Required wrapper — flex row of links + separators |
Last child styled as current page |
separator |
Custom divider (e.g. /) between segments |
Alternative to i.icon.chevron-right |
| Sizes |
xs |
Tiny |
Modifier on breadcrumb |
sm |
Small |
Modifier on breadcrumb |
| (default) |
Medium — 14px |
No size class needed |
xl |
Large |
Modifier on breadcrumb |
lg |
Big |
Modifier on breadcrumb |
| Intents |
primary, positive, negative, warning, info, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black |
Recolours all links and the current page label |
Modifier on breadcrumb |