~/css/tailwind-breadcrumbs

6 Tailwind Breadcrumbs

5 Tailwind1 with JSPublished 2026-10-04Free · no sign-up

Six breadcrumb trails built with Tailwind: a slash trail, a home icon with chevrons, pills, arrow-shaped checkout steps, an admin page header and a trail that collapses its middle levels on phones.

Filter demos

01. Tailwind Slash Breadcrumb

TailwindNavigation

A standard breadcrumb in Tailwind: a nav landmark with aria-label, an ordered list, separators added with a before: utility on every item after the first using an arbitrary [&+li] variant, and the current page marked with aria-current.

View code

<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center text-sm [&>li+li]:before:mx-2.5 [&>li+li]:before:text-slate-400 [&>li+li]:before:content-['/']">
    <li><a href="#" class="text-slate-600 hover:text-slate-900 hover:underline">Home</a></li>
    <li><a href="#" class="text-slate-600 hover:text-slate-900 hover:underline">Garden</a></li>
    <li><a href="#" class="text-slate-600 hover:text-slate-900 hover:underline">Planters</a></li>
    <li><span aria-current="page" class="font-bold text-slate-900">Terracotta planter</span></li>
  </ol>
</nav>

02. Tailwind Chevron Breadcrumb

TailwindIcon

A breadcrumb that starts with a home icon and uses SVG chevrons between items. The icon link has an accessible name of Home, chevrons are aria-hidden, and a long current page name truncates with Tailwind's truncate utility.

View code

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2 text-sm">
    <li><a href="#" aria-label="Home" class="text-slate-400 hover:text-white"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z"/></svg></a></li>
    <li class="flex items-center gap-2"><svg class="h-3 w-3 text-slate-500" viewBox="0 0 12 12" aria-hidden="true"><path d="M4 2l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg><a href="#" class="text-slate-400 hover:text-white">Projects</a></li>
    <li class="flex min-w-0 items-center gap-2"><svg class="h-3 w-3 shrink-0 text-slate-500" viewBox="0 0 12 12" aria-hidden="true"><path d="M4 2l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg><span aria-current="page" class="max-w-[180px] truncate font-semibold text-white">Autumn lookbook photo shoot</span></li>
  </ol>
</nav>

03. Tailwind Pill Breadcrumb

TailwindPills

Each level as a rounded pill joined by small dots, with the current page filled in the brand colour. Hover and focus-visible utilities lift a pill slightly, which signals clearly which level you are about to open.

View code

<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-1.5 text-[13px] font-semibold [&>li+li]:before:mr-1.5 [&>li+li]:before:inline-block [&>li+li]:before:h-1 [&>li+li]:before:w-1 [&>li+li]:before:rounded-full [&>li+li]:before:bg-slate-400 [&>li+li]:before:align-middle">
    <li><a href="#" class="inline-block rounded-full border border-slate-300 px-3 py-1.5 text-slate-700 transition hover:-translate-y-px hover:border-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">Workspace</a></li>
    <li><a href="#" class="inline-block rounded-full border border-slate-300 px-3 py-1.5 text-slate-700 transition hover:-translate-y-px hover:border-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">Reports</a></li>
    <li><span aria-current="page" class="inline-block rounded-full bg-blue-600 px-3 py-1.5 text-white">Q3 sales</span></li>
  </ol>
</nav>

04. Tailwind Arrow Step Breadcrumb

TailwindSteps

Checkout steps shaped as arrows with an arbitrary clip-path polygon value, overlapping slightly with a negative margin. Completed steps are links, the current step is highlighted, and the future step is plain muted text.

View code

<nav aria-label="Checkout progress">
  <ol class="flex text-xs font-semibold">
    <li><a href="#" class="-mr-2 block bg-slate-700 py-2.5 pl-4 pr-6 text-slate-200 [clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%)] hover:bg-slate-600">Cart</a></li>
    <li><a href="#" class="-mr-2 block bg-slate-700 py-2.5 pl-6 pr-6 text-slate-200 [clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%,12px_50%)] hover:bg-slate-600">Details</a></li>
    <li><span aria-current="step" class="-mr-2 block bg-indigo-500 py-2.5 pl-6 pr-6 text-white [clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%,12px_50%)]">Shipping</span></li>
    <li><span class="block bg-slate-800 py-2.5 pl-6 pr-6 text-slate-400 [clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%,12px_50%)]">Payment</span></li>
  </ol>
</nav>

05. Tailwind Page Header with Breadcrumb

TailwindHeader

An admin page header with a small breadcrumb above the page title and an action button on the right. flex-wrap moves the button under the title on narrow screens, and the breadcrumb sits in its own labelled nav landmark.

View code

<header class="flex w-full max-w-xl flex-wrap items-end justify-between gap-3 rounded-2xl bg-white p-5 shadow-lg shadow-slate-900/5">
  <div>
    <nav aria-label="Breadcrumb"><ol class="mb-1.5 flex text-[13px] [&>li+li]:before:mx-2 [&>li+li]:before:text-slate-400 [&>li+li]:before:content-['/']"><li><a href="#" class="text-slate-600 hover:text-slate-900">Customers</a></li><li><span aria-current="page" class="text-slate-900">Amina Yusuf</span></li></ol></nav>
    <h1 class="text-2xl font-bold tracking-tight text-slate-900">Amina Yusuf</h1>
  </div>
  <a href="#" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-bold text-slate-900 hover:bg-slate-50">Send email</a>
</header>

06. Tailwind Collapsing Breadcrumb

TailwindResponsive

A deep breadcrumb that hides its middle levels behind an ellipsis button on small screens, using max-sm:hidden on the middle items. On wider screens every level shows; on phones the button reveals them and reports its state with aria-expanded.

View code

<nav aria-label="Breadcrumb" id="twbc">
  <ol class="flex flex-wrap items-center gap-2 text-sm [&>li+li]:before:mr-2 [&>li+li]:before:text-slate-500 [&>li+li]:before:content-['\203A']">
    <li><a href="#" class="text-slate-400 hover:text-white">Docs</a></li>
    <li class="sm:hidden"><button aria-expanded="false" aria-label="Show 3 more levels" class="rounded bg-slate-800 px-2 font-bold text-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-400">&hellip;</button></li>
    <li class="twmid max-sm:hidden"><a href="#" class="text-slate-400 hover:text-white">Guides</a></li>
    <li class="twmid max-sm:hidden"><a href="#" class="text-slate-400 hover:text-white">Payments</a></li>
    <li class="twmid max-sm:hidden"><a href="#" class="text-slate-400 hover:text-white">Refunds</a></li>
    <li><span aria-current="page" class="font-semibold text-white">Partial refunds</span></li>
  </ol>
</nav>

const more = document.querySelector('#twbc button');
more.addEventListener('click', () => {
  document.querySelectorAll('#twbc .twmid').forEach(li => li.classList.remove('max-sm:hidden'));
  more.parentElement.hidden = true;
  document.querySelector('#twbc .twmid a').focus();
});

About these Tailwind Breadcrumbs

Separators from the parent

The arbitrary variant [&>li+li]:before:content-['/'] on the list adds a separator before every item except the first, so the list items stay clean and the separators are not read aloud.

Current page

Mark the last item with aria-current="page", or aria-current="step" for checkout steps, and show it as text rather than a link.

Arrow shapes

Arbitrary clip-path values such as [clip-path:polygon(...)] cut each step into an arrow; a negative margin overlaps the points neatly.

Phones

max-sm:hidden hides middle levels on small screens, and a button reveals them, so long trails do not wrap onto several lines.

Frequently asked questions

Do these need JavaScript?

Only the collapsing breadcrumb.

Can I add structured data?

Yes. Add BreadcrumbList JSON-LD to the page; the CSS breadcrumbs collection includes a microdata example.

Is there a CSS version?

Yes, see the CSS breadcrumbs collection.