Accessible HTML breadcrumb markup with ARIA. Pairs with the BreadcrumbList JSON-LD generator.
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="/blog">Blog</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item active" aria-current="page">How to ship faster</li>
</ol>
</nav>
<style>
.breadcrumb { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.breadcrumb-item a { color: #4f46e5; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: #64748b; }
.breadcrumb-separator { color: #cbd5e1; }
</style>