39 Tailwind CSS Breadcrumbs
01 / 39

All 39 in 39 Tailwind CSS Breadcrumbs

  1. 01Tailwind Accessible Breadcrumb with Schema.org Microdata & ARIA
  2. 02Tailwind Responsive Collapsing Breadcrumb Bar with Container Queries
  3. 03Tailwind Adaptive Light & Dark Mode Breadcrumb Bar with Theme Tokens
  4. 04Tailwind E-Commerce Filter & Facet Breadcrumb with Removable Chips
  5. 05Tailwind Glassmorphism Floating Breadcrumb Pill with Shimmer Sweep
  6. 06Tailwind Neumorphic Soft UI Breadcrumb with Dual Box Shadows
  7. 07Tailwind Sticky Scroll-Shrink Breadcrumb Header with Scroll-Driven Animation
  8. 08Tailwind Material Design Flat Breadcrumb Bar with Ink Ripple
  9. 09Tailwind Isometric 3D Layered Breadcrumb with Extruded Tiles
  10. 10Tailwind Breadcrumb Bar with Built-In Dropdown Sibling Menus
  11. 11Tailwind Full-Width Block-Style Segmented Breadcrumb Bar
  12. 12Tailwind Accent-Colour Toggle Breadcrumb with Persisted Theme
  13. 13Tailwind Seamless Arrow-Cutout Breadcrumb Trail with clip-path
  14. 14Tailwind Compact Icon-Only Home Node Breadcrumb Bar
  15. 15Tailwind Segmented Rounded-Outline Pill Breadcrumb
  16. 16Tailwind Neumorphic Soft Inset-Shadow Breadcrumb Channel
  17. 17Tailwind CSS Grid Auto-Fitting Responsive Breadcrumb Trail
  18. 18Tailwind Holographic Shimmer Web3 Breadcrumb with Animated @property
  19. 19Tailwind SaaS Gradient-Text Breadcrumb Bar with Animated Clip
  20. 20Tailwind Marketplace Filter-Chip Breadcrumb with Icon Chips
  21. 21Tailwind Editorial Breadcrumb with Animated SVG Wave Underline
  22. 22Tailwind Developer Docs Breadcrumb with One-Click Path Copy
  23. 23Tailwind Modern Arrow Breadcrumb Bar using clip-path Polygons
  24. 24Tailwind Multi-Line Aligned Breadcrumb Layout with CSS Subgrid
  25. 25Tailwind Breadcrumb Links with Animated Underline Glow
  26. 26Tailwind Minimalist Breadcrumb with Swappable Masked SVG Separators
  27. 27Tailwind Multi-Step Checkout & Wizard Breadcrumb Indicator
  28. 28Tailwind Ribbon-Style Chevron Breadcrumb Trail
  29. 29Tailwind Pill-Shape Badge Breadcrumb Bar
  30. 30Tailwind Clean Line-Separator Minimalist Breadcrumbs
  31. 31Tailwind Gradient Background Glow Breadcrumb Bar
  32. 32Tailwind Floating Card Shadow Breadcrumb Navigation
  33. 33Tailwind Truncated Ellipsis Compact Mobile Breadcrumb
  34. 34Tailwind Inline Bullet-Dot Separator Breadcrumb
  35. 35Tailwind Skewed Parallelogram Breadcrumb Bar
  36. 36Tailwind Outline Border-Only Geometric Breadcrumbs
  37. 37Tailwind Circular Icon & Numbered Step Breadcrumbs
  38. 38Tailwind Frosted Glass Dark UI Breadcrumb Component
  39. 39Tailwind Micro-Interaction Animated Hover Breadcrumbs
Pure TailwindMIT licensed

Tailwind Accessible Breadcrumb with Schema.org Microdata & ARIA

The reference-grade trail: full schema.org BreadcrumbList Microdata inline in the markup so Google can render breadcrumb rich results, ARIA done correctly, and separators that stay out of the accessibility tree. The port's win is aria-[current=page]: — the current-page style keys off the attribute a screen reader already reads, so style and semantics cannot drift.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tbc-01 w-full min-h-svh grid place-items-center bg-tbc01-bg font-tbc01-sans px-5 py-9">
  <nav aria-label="Breadcrumb" class="w-[min(680px,100%)] px-4 py-3 rounded-2xl bg-white border border-tbc01-edge shadow-[0_1px_2px_oklch(0.4_0.02_250/0.06)]">
    <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="flex flex-wrap items-center gap-y-0.5 list-none m-0 p-0">
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center text-sm font-medium">
        <a itemprop="item" href="/" class="inline-flex items-center min-h-8 px-1.5 rounded-md text-tbc01-link no-underline transition-colors duration-150 hover:text-tbc01-linkhover hover:bg-tbc01-tint hover:underline hover:underline-offset-2 focus-visible:outline-3 focus-visible:outline-tbc01-acc focus-visible:outline-offset-2"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center text-sm font-medium before:content-['/'] before:mx-3 before:font-normal before:text-tbc01-sep">
        <a itemprop="item" href="/guides" class="inline-flex items-center min-h-8 px-1.5 rounded-md text-tbc01-link no-underline transition-colors duration-150 hover:text-tbc01-linkhover hover:bg-tbc01-tint hover:underline hover:underline-offset-2 focus-visible:outline-3 focus-visible:outline-tbc01-acc focus-visible:outline-offset-2"><span itemprop="name">Guides</span></a>
        <meta itemprop="position" content="2">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center text-sm font-medium before:content-['/'] before:mx-3 before:font-normal before:text-tbc01-sep">
        <a itemprop="item" href="/guides/css" class="inline-flex items-center min-h-8 px-1.5 rounded-md text-tbc01-link no-underline transition-colors duration-150 hover:text-tbc01-linkhover hover:bg-tbc01-tint hover:underline hover:underline-offset-2 focus-visible:outline-3 focus-visible:outline-tbc01-acc focus-visible:outline-offset-2"><span itemprop="name">CSS</span></a>
        <meta itemprop="position" content="3">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page" class="flex items-center text-sm font-medium before:content-['/'] before:mx-3 before:font-normal before:text-tbc01-sep aria-[current=page]:font-semibold aria-[current=page]:text-tbc01-strong">
        <span itemprop="name" class="inline-flex items-center min-h-8 px-1.5">Accessible Breadcrumbs</span>
        <meta itemprop="position" content="4">
      </li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc01-bg: #fcfcfd;
  --color-tbc01-bg: oklch(0.99 0.003 250);
  --color-tbc01-edge: #e6e7ec;
  --color-tbc01-edge: oklch(0.92 0.005 250);
  --color-tbc01-link: #4a63b5;
  --color-tbc01-link: oklch(0.5 0.13 255);
  --color-tbc01-linkhover: #3a4f9c;
  --color-tbc01-linkhover: oklch(0.42 0.16 255);
  --color-tbc01-tint: #eef1fb;
  --color-tbc01-tint: oklch(0.95 0.02 255);
  --color-tbc01-sep: #adb1bd;
  --color-tbc01-sep: oklch(0.72 0.02 250);
  --color-tbc01-strong: #4c4f57;
  --color-tbc01-strong: oklch(0.35 0.01 250);
  --color-tbc01-acc: #3d54a8;
  --color-tbc01-acc: oklch(0.45 0.18 255);
  --font-tbc01-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the stage is sized before the browser build has compiled. */

.tbc-01 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tbc01-bg: #fcfcfd;
  --color-tbc01-bg: oklch(0.99 0.003 250);
  --color-tbc01-edge: #e6e7ec;
  --color-tbc01-edge: oklch(0.92 0.005 250);
  --color-tbc01-link: #4a63b5;
  --color-tbc01-link: oklch(0.5 0.13 255);
  --color-tbc01-linkhover: #3a4f9c;
  --color-tbc01-linkhover: oklch(0.42 0.16 255);
  --color-tbc01-tint: #eef1fb;
  --color-tbc01-tint: oklch(0.95 0.02 255);
  --color-tbc01-sep: #adb1bd;
  --color-tbc01-sep: oklch(0.72 0.02 250);
  --color-tbc01-strong: #4c4f57;
  --color-tbc01-strong: oklch(0.35 0.01 250);
  --color-tbc01-acc: #3d54a8;
  --color-tbc01-acc: oklch(0.45 0.18 255);
  --font-tbc01-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the stage is sized before the browser build has compiled. */

.tbc-01 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • One li + li::before rule becomes a before: utility trio on each crumb that owns a separator. More characters, but the first crumb's lack of one is now structural rather than a selector's side effect.
  • aria-[current=page]: is the port's real gain: the CSS version needed li[aria-current="page"] span, a selector that can silently stop matching if the attribute moves. The utility sits on the element that carries it.
  • UI change from the CSS original: the trail now sits on a white card with a hairline and the links carry min-h-8 hit targets — the bare inline version was technically compliant but visually unanchored on a page.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Accessible Breadcrumb with Schema.org Microdata & ARIA
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-accessible-breadcrumb-schema-org-microdata-aria/

The reference-grade trail: full schema.org BreadcrumbList Microdata inline in the markup so Google can render breadcrumb rich results, ARIA done correctly, and separators that stay out of the accessibility tree. The port's win is aria-[current=page]: — the current-page style keys off the attribute a screen reader already reads, so style and semantics cannot drift.
## HTML
```html
<section class="tbc-01 w-full min-h-svh grid place-items-center bg-tbc01-bg font-tbc01-sans px-5 py-9">
  <nav aria-label="Breadcrumb" class="w-[min(680px,100%)] px-4 py-3 rounded-2xl bg-white border border-tbc01-edge shadow-[0_1px_2px_oklch(0.4_0.02_250/0.06)]">
    <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="flex flex-wrap items-center gap-y-0.5 list-none m-0 p-0">
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center text-sm font-medium">
        <a itemprop="item" href="/" class="inline-flex items-center min-h-8 px-1.5 rounded-md text-tbc01-link no-underline transition-colors duration-150 hover:text-tbc01-linkhover hover:bg-tbc01-tint hover:underline hover:underline-offset-2 focus-visible:outline-3 focus-visible:outline-tbc01-acc focus-visible:outline-offset-2"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center text-sm font-medium before:content-['/'] before:mx-3 before:font-normal before:text-tbc01-sep">
        <a itemprop="item" href="/guides" class="inline-flex items-center min-h-8 px-1.5 rounded-md text-tbc01-link no-underline transition-colors duration-150 hover:text-tbc01-linkhover hover:bg-tbc01-tint hover:underline hover:underline-offset-2 focus-visible:outline-3 focus-visible:outline-tbc01-acc focus-visible:outline-offset-2"><span itemprop="name">Guides</span></a>
        <meta itemprop="position" content="2">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center text-sm font-medium before:content-['/'] before:mx-3 before:font-normal before:text-tbc01-sep">
        <a itemprop="item" href="/guides/css" class="inline-flex items-center min-h-8 px-1.5 rounded-md text-tbc01-link no-underline transition-colors duration-150 hover:text-tbc01-linkhover hover:bg-tbc01-tint hover:underline hover:underline-offset-2 focus-visible:outline-3 focus-visible:outline-tbc01-acc focus-visible:outline-offset-2"><span itemprop="name">CSS</span></a>
        <meta itemprop="position" content="3">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page" class="flex items-center text-sm font-medium before:content-['/'] before:mx-3 before:font-normal before:text-tbc01-sep aria-[current=page]:font-semibold aria-[current=page]:text-tbc01-strong">
        <span itemprop="name" class="inline-flex items-center min-h-8 px-1.5">Accessible Breadcrumbs</span>
        <meta itemprop="position" content="4">
      </li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc01-bg: #fcfcfd;
  --color-tbc01-bg: oklch(0.99 0.003 250);
  --color-tbc01-edge: #e6e7ec;
  --color-tbc01-edge: oklch(0.92 0.005 250);
  --color-tbc01-link: #4a63b5;
  --color-tbc01-link: oklch(0.5 0.13 255);
  --color-tbc01-linkhover: #3a4f9c;
  --color-tbc01-linkhover: oklch(0.42 0.16 255);
  --color-tbc01-tint: #eef1fb;
  --color-tbc01-tint: oklch(0.95 0.02 255);
  --color-tbc01-sep: #adb1bd;
  --color-tbc01-sep: oklch(0.72 0.02 250);
  --color-tbc01-strong: #4c4f57;
  --color-tbc01-strong: oklch(0.35 0.01 250);
  --color-tbc01-acc: #3d54a8;
  --color-tbc01-acc: oklch(0.45 0.18 255);
  --font-tbc01-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the stage is sized before the browser build has compiled. */

.tbc-01 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The separator moves onto the crumb. The CSS version writes li + li::before{content:"/"}. Tailwind states it on the elements that own one:

<li class="flex items-center before:content-['/'] before:mx-3 before:text-tbc01-sep">

Pseudo-elements are still absent from the accessibility tree, so the announcement is unchanged — "Home, link… Guides, link… Accessible Breadcrumbs, current page" — but the first crumb provably carries no glyph, because it simply lacks the utility.

Structured data is markup, not style. itemscope, itemtype, itemprop and the <meta itemprop="position"> counters survive the port untouched: this is the one demo where Tailwind changes nothing that matters to Google and everything about where the styles live.

The last crumb is a span, not a link. It carries aria-current="page" and itemprop="name", so the aria-[current=page]: variant styles it and Search Console still reads a valid, sequential list.

Make it yours

  • Swap the glyph in one place per crumb: before:content-['\203A'] for a chevron, or a masked SVG via before:[mask-image:url(...)].
  • Prefer JSON-LD? Drop a <script type="application/ld+json"> with the same BreadcrumbList and strip the Microdata attributes — never ship both for one trail.
  • Retheme through --color-tbc01-acc: link colour, hover tint and focus ring all read it.

Gotchas — read before shipping

  • <meta itemprop="position"> values must be 1-based and sequential, or Search Console flags the structured data as invalid.
  • Never put the separator inside the link text or inside itemprop="name" — it corrupts both the accessible name and the structured-data string. Keeping it in before: is what prevents that.
  • Tailwind's built-in aria-current: shorthand compiles to [aria-current="true"], and "true" is never the right value for a breadcrumb — the valid one is page. Always write the explicit aria-[current=page]: form; the shorthand is silently dead code on every trail in this collection.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Microdata and ARIA are attribute features with universal support and :focus-visible has been Baseline since 2022; the floor quoted here is Tailwind v4's own generated sheet (cascade layers, @property, color-mix()).

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-visibletw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →