39 Tailwind CSS Breadcrumbs
29 / 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 Pill-Shape Badge Breadcrumb Bar

The friendly dashboard trail: every crumb is a softly tinted capsule, hover deepens the tint, and the current crumb is a solid accent pill. Two color-mix() values do all the work, both derived from one accent token, so the whole bar retints from a single edit.

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-29 w-full min-h-svh grid place-items-center bg-tbc29-surface font-tbc29-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-2 list-none m-0 p-0">
      <li class="flex items-center gap-2"><a href="#" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-semibold text-tbc29-ink no-underline bg-[color-mix(in_oklab,var(--color-tbc29-acc)_10%,var(--color-tbc29-surface))] transition-colors duration-200 hover:text-tbc29-inkhover hover:bg-[color-mix(in_oklab,var(--color-tbc29-acc)_20%,var(--color-tbc29-surface))] focus-visible:outline-2 focus-visible:outline-tbc29-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Home</a></li>
      <li class="flex items-center gap-2 before:content-['\203A'] before:text-sm before:text-tbc29-sep"><a href="#" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-semibold text-tbc29-ink no-underline bg-[color-mix(in_oklab,var(--color-tbc29-acc)_10%,var(--color-tbc29-surface))] transition-colors duration-200 hover:text-tbc29-inkhover hover:bg-[color-mix(in_oklab,var(--color-tbc29-acc)_20%,var(--color-tbc29-surface))] focus-visible:outline-2 focus-visible:outline-tbc29-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Team</a></li>
      <li class="flex items-center gap-2 before:content-['\203A'] before:text-sm before:text-tbc29-sep"><a href="#" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-semibold text-tbc29-ink no-underline bg-[color-mix(in_oklab,var(--color-tbc29-acc)_10%,var(--color-tbc29-surface))] transition-colors duration-200 hover:text-tbc29-inkhover hover:bg-[color-mix(in_oklab,var(--color-tbc29-acc)_20%,var(--color-tbc29-surface))] focus-visible:outline-2 focus-visible:outline-tbc29-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Design</a></li>
      <li class="flex items-center gap-2 before:content-['\203A'] before:text-sm before:text-tbc29-sep"><a href="#" aria-current="page" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-bold text-white no-underline cursor-default bg-tbc29-acc focus-visible:outline-2 focus-visible:outline-tbc29-ring focus-visible:outline-offset-2">Tokens</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc29-surface: #fbfafe;
  --color-tbc29-surface: oklch(0.98 0.004 285);
  --color-tbc29-ink: #4e4870;
  --color-tbc29-ink: oklch(0.42 0.08 285);
  --color-tbc29-inkhover: #382f60;
  --color-tbc29-inkhover: oklch(0.32 0.12 285);
  --color-tbc29-sep: #a9a4bc;
  --color-tbc29-sep: oklch(0.7 0.02 285);
  --color-tbc29-acc: #6a5ad4;
  --color-tbc29-acc: oklch(0.52 0.16 285);
  --color-tbc29-ring: #2e2856;
  --color-tbc29-ring: oklch(0.28 0.1 285);
  --font-tbc29-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-29 {
  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-tbc29-surface: #fbfafe;
  --color-tbc29-surface: oklch(0.98 0.004 285);
  --color-tbc29-ink: #4e4870;
  --color-tbc29-ink: oklch(0.42 0.08 285);
  --color-tbc29-inkhover: #382f60;
  --color-tbc29-inkhover: oklch(0.32 0.12 285);
  --color-tbc29-sep: #a9a4bc;
  --color-tbc29-sep: oklch(0.7 0.02 285);
  --color-tbc29-acc: #6a5ad4;
  --color-tbc29-acc: oklch(0.52 0.16 285);
  --color-tbc29-ring: #2e2856;
  --color-tbc29-ring: oklch(0.28 0.1 285);
  --font-tbc29-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-29 {
  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&display=swap">

What changed in the port

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

  • Deriving every fill from one accent with color-mix() is what makes this bar a two-minute retheme. The utilities are longer than bg-indigo-50 and they cannot drift out of harmony.
  • The current pill's focus ring uses a darker ring token rather than the accent, because an accent-coloured outline on an accent fill is invisible — a small detail the original missed.
  • UI change from the CSS original: capsules grew to min-h-10, the accent darkened for AA with white text, and the current pill gained cursor-default.
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 Pill-Shape Badge Breadcrumb Bar
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-pill-shape-badge-breadcrumb-bar/

The friendly dashboard trail: every crumb is a softly tinted capsule, hover deepens the tint, and the current crumb is a solid accent pill. Two color-mix() values do all the work, both derived from one accent token, so the whole bar retints from a single edit.
## HTML
```html
<section class="tbc-29 w-full min-h-svh grid place-items-center bg-tbc29-surface font-tbc29-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-2 list-none m-0 p-0">
      <li class="flex items-center gap-2"><a href="#" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-semibold text-tbc29-ink no-underline bg-[color-mix(in_oklab,var(--color-tbc29-acc)_10%,var(--color-tbc29-surface))] transition-colors duration-200 hover:text-tbc29-inkhover hover:bg-[color-mix(in_oklab,var(--color-tbc29-acc)_20%,var(--color-tbc29-surface))] focus-visible:outline-2 focus-visible:outline-tbc29-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Home</a></li>
      <li class="flex items-center gap-2 before:content-['\203A'] before:text-sm before:text-tbc29-sep"><a href="#" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-semibold text-tbc29-ink no-underline bg-[color-mix(in_oklab,var(--color-tbc29-acc)_10%,var(--color-tbc29-surface))] transition-colors duration-200 hover:text-tbc29-inkhover hover:bg-[color-mix(in_oklab,var(--color-tbc29-acc)_20%,var(--color-tbc29-surface))] focus-visible:outline-2 focus-visible:outline-tbc29-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Team</a></li>
      <li class="flex items-center gap-2 before:content-['\203A'] before:text-sm before:text-tbc29-sep"><a href="#" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-semibold text-tbc29-ink no-underline bg-[color-mix(in_oklab,var(--color-tbc29-acc)_10%,var(--color-tbc29-surface))] transition-colors duration-200 hover:text-tbc29-inkhover hover:bg-[color-mix(in_oklab,var(--color-tbc29-acc)_20%,var(--color-tbc29-surface))] focus-visible:outline-2 focus-visible:outline-tbc29-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Design</a></li>
      <li class="flex items-center gap-2 before:content-['\203A'] before:text-sm before:text-tbc29-sep"><a href="#" aria-current="page" class="inline-flex items-center min-h-10 px-4 rounded-full text-[13px] font-bold text-white no-underline cursor-default bg-tbc29-acc focus-visible:outline-2 focus-visible:outline-tbc29-ring focus-visible:outline-offset-2">Tokens</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc29-surface: #fbfafe;
  --color-tbc29-surface: oklch(0.98 0.004 285);
  --color-tbc29-ink: #4e4870;
  --color-tbc29-ink: oklch(0.42 0.08 285);
  --color-tbc29-inkhover: #382f60;
  --color-tbc29-inkhover: oklch(0.32 0.12 285);
  --color-tbc29-sep: #a9a4bc;
  --color-tbc29-sep: oklch(0.7 0.02 285);
  --color-tbc29-acc: #6a5ad4;
  --color-tbc29-acc: oklch(0.52 0.16 285);
  --color-tbc29-ring: #2e2856;
  --color-tbc29-ring: oklch(0.28 0.1 285);
  --font-tbc29-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

One token, three shades. 10% tint at rest, 20% on hover, 100% for the current page — all mixed against the surface rather than hard-coded, so a new accent produces a coherent bar with no further edits. That is the practical argument for color-mix() over three separate colour tokens.

Gap, not margins. The chevrons live in before: and the spacing is gap-2 in two places, which keeps the row wrapping cleanly on narrow screens with no per-crumb margin bookkeeping.

Contrast: the accent at oklch(0.52 0.16 285) holds white text at about 5.1:1, and the tinted ink is dark enough to clear AA on the 10% fill.

Make it yours

  • Tint ramp: the two mix percentages.
  • Accent: --color-tbc29-acc — every other colour is derived.
  • Radius: rounded-full, or rounded-lg for a squarer badge bar.

Gotchas — read before shipping

  • Mixing against transparent instead of the surface produces a tint that shifts when the page background changes; mix against the surface token.
  • Pills with a background look clickable — the current crumb gets cursor-default so the one non-navigating capsule says so.
  • in_oklab rather than in_srgb keeps the tints from going muddy at low percentages.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

color-mix() is the only modern feature and is Tailwind v4's own floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

color-mix()tw ↗border radiustw ↗transitionstw ↗prefers-reduced-motiontw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →