Chevron Separators
Classic breadcrumb with chevron separators and hover effects
Slash Separators
Modern breadcrumb with underline hover animation
Arrow Background Style
Connected breadcrumb segments with arrow backgrounds
Pill Style
Rounded pill-shaped breadcrumb items with gradient current page
Underline Style
Clean breadcrumb with bottom border and active underline indicator
Icon + Text Style
Breadcrumb with icons for enhanced visual hierarchy
Responsive Truncation
Automatically truncates on mobile, showing first and last items
Schema.org Structured Data
SEO-friendly breadcrumb markup for search engines
<nav aria-label="Breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/products">
<span itemprop="name">Products</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Current Page</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
Key Features Demonstrated
- ✓ Multiple separator styles (›, /, →, •, arrows)
- ✓ Current page visual indication
- ✓ Hover states with smooth transitions
- ✓ Responsive truncation for mobile
- ✓ Schema.org microdata for SEO
- ✓ Icon integration support
- ✓ Various design patterns (pills, underline, connected)
- ✓ Accessibility with aria-label
- ✓ Flexbox layout with wrapping
- ✓ Production-ready implementations