breadcrumb navigation wayfinding trail path chevron slash pill breadcrumb navigation trail path wayfinding chevron slash pill hierarchy breadcrumb navigation page trail with chevrons pill-style breadcrumb segments breadcrumb in page header context
Breadcrumb Base
Fetch pattern JSON:
curl https://webspire.de/patterns/breadcrumb/base.json base.html
<div class="ws-breadcrumb mx-auto max-w-3xl space-y-10 py-12">
<!-- Style 1: Chevron separators (default) -->
<div>
<p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-breadcrumb-text)]/40">Chevron</p>
<nav aria-label="Breadcrumb" class="rounded-lg border border-[var(--ws-breadcrumb-separator)]/15 bg-[var(--ws-breadcrumb-text)]/[0.02] px-4 py-3">
<ol class="flex flex-wrap items-center gap-1.5 text-sm">
<li>
<a href="#" class="inline-flex items-center gap-1.5 text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">
<svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
Home
</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li>
<a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Products</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li>
<a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Electronics</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li>
<span class="font-medium text-[var(--ws-breadcrumb-active)]" aria-current="page">Headphones</span>
</li>
</ol>
</nav>
</div>
<!-- Style 2: Slash separators -->
<div>
<p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-breadcrumb-text)]/40">Slash</p>
<nav aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center gap-1.5 text-sm">
<li><a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Home</a></li>
<li aria-hidden="true" class="select-none text-[var(--ws-breadcrumb-separator)]">/</li>
<li><a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Docs</a></li>
<li aria-hidden="true" class="select-none text-[var(--ws-breadcrumb-separator)]">/</li>
<li><a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Components</a></li>
<li aria-hidden="true" class="select-none text-[var(--ws-breadcrumb-separator)]">/</li>
<li><span class="font-medium text-[var(--ws-breadcrumb-active)]" aria-current="page">Breadcrumb</span></li>
</ol>
</nav>
</div>
<!-- Style 3: Pill segments -->
<div>
<p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-breadcrumb-text)]/40">Pills</p>
<nav aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center gap-1.5 text-sm">
<li>
<a href="#" class="inline-flex items-center gap-1.5 rounded-md bg-[var(--ws-breadcrumb-text)]/[0.06] px-2.5 py-1 text-[var(--ws-breadcrumb-text)] transition hover:bg-[var(--ws-breadcrumb-text)]/[0.1] hover:text-[var(--ws-breadcrumb-active)]">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
Home
</a>
</li>
<li aria-hidden="true">
<svg class="h-3.5 w-3.5 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li>
<a href="#" class="inline-block rounded-md bg-[var(--ws-breadcrumb-text)]/[0.06] px-2.5 py-1 text-[var(--ws-breadcrumb-text)] transition hover:bg-[var(--ws-breadcrumb-text)]/[0.1] hover:text-[var(--ws-breadcrumb-active)]">Settings</a>
</li>
<li aria-hidden="true">
<svg class="h-3.5 w-3.5 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li>
<span class="inline-block rounded-md bg-[var(--ws-breadcrumb-active)]/10 px-2.5 py-1 font-medium text-[var(--ws-breadcrumb-active)]" aria-current="page">Profile</span>
</li>
</ol>
</nav>
</div>
<!-- Style 4: In page context -->
<div>
<p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-breadcrumb-text)]/40">In context</p>
<div class="rounded-xl border border-[var(--ws-breadcrumb-separator)]/15 p-6">
<nav aria-label="Breadcrumb" class="mb-4">
<ol class="flex flex-wrap items-center gap-1.5 text-sm">
<li><a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Dashboard</a></li>
<li aria-hidden="true"><svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="#" class="text-[var(--ws-breadcrumb-text)] transition hover:text-[var(--ws-breadcrumb-active)]">Projects</a></li>
<li aria-hidden="true"><svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg></li>
<li><span class="font-medium text-[var(--ws-breadcrumb-active)]" aria-current="page">Webspire</span></li>
</ol>
</nav>
<h1 class="text-2xl font-bold text-[var(--ws-breadcrumb-active)]">Project Webspire</h1>
<p class="mt-2 text-sm text-[var(--ws-breadcrumb-text)]">Tailwind UI Pattern Registry for humans and agents.</p>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
breadcrumbnavigationwayfindingtrailpathchevronslashpill
Slots
| Name | Required | Description |
|---|---|---|
| items | Yes | Ordered list of breadcrumb links with separators. |
Four breadcrumb styles in one showcase: Chevron (inside a subtle container with home icon), Slash (minimal text-only), Pills (interactive segments with hover backgrounds, current page highlighted), and In Context (breadcrumb sitting above a page title inside a bordered card). All use semantic <nav> with aria-label and aria-current="page".