39 Tailwind CSS Breadcrumbs
19 / 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 SaaS Gradient-Text Breadcrumb Bar with Animated Clip

The marketing-site trail: crumb labels painted with a slowly drifting conic gradient clipped to the text, on a frosted white bar. Hover speeds the drift and draws a gradient rule under the label. bg-clip-text text-transparent is a real Tailwind pair, so only the angle registration and keyframes stay CSS.

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-19 w-full min-h-svh flex items-center justify-center px-6 py-10 font-tbc19-sans text-tbc19-ink bg-[radial-gradient(1200px_600px_at_50%_-10%,oklch(0.96_0.02_270/0.9),transparent_60%),linear-gradient(180deg,oklch(0.99_0.005_260),oklch(0.97_0.01_265))]">
  <nav aria-label="Breadcrumb" class="w-full max-w-[880px] px-5.5 py-3.5 rounded-2xl bg-white/72 backdrop-blur-[14px] border border-tbc19-edge shadow-[inset_0_1px_0_oklch(1_0_0/0.9),0_12px_40px_-18px_oklch(0.3_0.05_270/0.35)]">
    <ol class="flex flex-wrap items-center gap-x-1 gap-y-0.5 list-none m-0 p-0 text-[15px] font-medium tracking-[-0.005em]">
      <li class="inline-flex items-center min-h-11"><a href="#" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] animate-tbc19-drift transition-[filter] duration-250 hover:[animation-duration:6s] hover:[filter:saturate(1.15)] focus-visible:[animation-duration:6s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 after:content-[''] after:absolute after:inset-x-2 after:bottom-1 after:h-[1.5px] after:rounded-[2px] after:opacity-0 after:scale-x-40 after:origin-left after:transition-[opacity,scale] after:duration-300 after:bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] hover:after:opacity-85 hover:after:scale-x-100 focus-visible:after:opacity-85 focus-visible:after:scale-x-100 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.66_0.24_20)]">Docs</a></li>
      <li class="inline-flex items-center min-h-11 before:content-[''] before:inline-block before:w-1.5 before:h-1.5 before:mx-2.5 before:rotate-[-45deg] before:opacity-70 before:border-r-[1.5px] before:border-b-[1.5px] before:border-tbc19-sep"><a href="#" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] animate-tbc19-drift transition-[filter] duration-250 hover:[animation-duration:6s] hover:[filter:saturate(1.15)] focus-visible:[animation-duration:6s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 after:content-[''] after:absolute after:inset-x-2 after:bottom-1 after:h-[1.5px] after:rounded-[2px] after:opacity-0 after:scale-x-40 after:origin-left after:transition-[opacity,scale] after:duration-300 after:bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] hover:after:opacity-85 hover:after:scale-x-100 focus-visible:after:opacity-85 focus-visible:after:scale-x-100 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.66_0.24_20)]">Guides</a></li>
      <li class="inline-flex items-center min-h-11 before:content-[''] before:inline-block before:w-1.5 before:h-1.5 before:mx-2.5 before:rotate-[-45deg] before:opacity-70 before:border-r-[1.5px] before:border-b-[1.5px] before:border-tbc19-sep"><a href="#" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] animate-tbc19-drift transition-[filter] duration-250 hover:[animation-duration:6s] hover:[filter:saturate(1.15)] focus-visible:[animation-duration:6s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 after:content-[''] after:absolute after:inset-x-2 after:bottom-1 after:h-[1.5px] after:rounded-[2px] after:opacity-0 after:scale-x-40 after:origin-left after:transition-[opacity,scale] after:duration-300 after:bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] hover:after:opacity-85 hover:after:scale-x-100 focus-visible:after:opacity-85 focus-visible:after:scale-x-100 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.66_0.24_20)]">Authentication</a></li>
      <li class="inline-flex items-center min-h-11 before:content-[''] before:inline-block before:w-1.5 before:h-1.5 before:mx-2.5 before:rotate-[-45deg] before:opacity-70 before:border-r-[1.5px] before:border-b-[1.5px] before:border-tbc19-sep"><a href="#" aria-current="page" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline font-bold bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.6_0.24_300),oklch(0.68_0.24_340),oklch(0.72_0.22_20),oklch(0.66_0.24_275),oklch(0.6_0.24_300))] animate-tbc19-drift [animation-duration:7s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.6_0.24_300),oklch(0.68_0.24_340),oklch(0.66_0.24_275)]">Magic Links</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@property --tbc19-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@theme {
  --color-tbc19-ink: #3b3f4d;
  --color-tbc19-ink: oklch(0.28 0.02 260);
  --color-tbc19-edge: #e2e4ee;
  --color-tbc19-edge: oklch(0.9 0.01 260 / 0.7);
  --color-tbc19-sep: #b3b6c2;
  --color-tbc19-sep: oklch(0.75 0.02 260);
  --color-tbc19-focus: #7a5cf0;
  --color-tbc19-focus: oklch(0.62 0.2 285);
  --font-tbc19-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --animate-tbc19-drift: tbc19-drift 18s linear infinite;
}

@keyframes tbc19-drift {
  to {
    --tbc19-angle: 360deg;
  }
}

.tbc-19 {
  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";

@property --tbc19-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@theme {
  --color-tbc19-ink: #3b3f4d;
  --color-tbc19-ink: oklch(0.28 0.02 260);
  --color-tbc19-edge: #e2e4ee;
  --color-tbc19-edge: oklch(0.9 0.01 260 / 0.7);
  --color-tbc19-sep: #b3b6c2;
  --color-tbc19-sep: oklch(0.75 0.02 260);
  --color-tbc19-focus: #7a5cf0;
  --color-tbc19-focus: oklch(0.62 0.2 285);
  --font-tbc19-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --animate-tbc19-drift: tbc19-drift 18s linear infinite;
}

@keyframes tbc19-drift {
  to {
    --tbc19-angle: 360deg;
  }
}

.tbc-19 {
  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.

  • hover:[animation-duration:6s] is the neat part of this port: the CSS version re-declared the animation on hover, and the utility form changes one longhand while the animation keeps running — no restart, no jump.
  • The @supports not (background: paint(something)) fallback from the original is replaced by motion-reduce: plus the registered-property default. Feature-detecting @property via a paint worklet was always a proxy, and a static gradient is the same outcome.
  • UI change from the CSS original: the gradient stops were pulled into a single lightness band so the labels never wash out mid-rotation against the white bar — the original's brightest stops dropped below 4.5:1 at certain angles.
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 SaaS Gradient-Text Breadcrumb Bar with Animated Clip
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-saas-gradient-text-breadcrumb-animated-clip/

The marketing-site trail: crumb labels painted with a slowly drifting conic gradient clipped to the text, on a frosted white bar. Hover speeds the drift and draws a gradient rule under the label. bg-clip-text text-transparent is a real Tailwind pair, so only the angle registration and keyframes stay CSS.
## HTML
```html
<section class="tbc-19 w-full min-h-svh flex items-center justify-center px-6 py-10 font-tbc19-sans text-tbc19-ink bg-[radial-gradient(1200px_600px_at_50%_-10%,oklch(0.96_0.02_270/0.9),transparent_60%),linear-gradient(180deg,oklch(0.99_0.005_260),oklch(0.97_0.01_265))]">
  <nav aria-label="Breadcrumb" class="w-full max-w-[880px] px-5.5 py-3.5 rounded-2xl bg-white/72 backdrop-blur-[14px] border border-tbc19-edge shadow-[inset_0_1px_0_oklch(1_0_0/0.9),0_12px_40px_-18px_oklch(0.3_0.05_270/0.35)]">
    <ol class="flex flex-wrap items-center gap-x-1 gap-y-0.5 list-none m-0 p-0 text-[15px] font-medium tracking-[-0.005em]">
      <li class="inline-flex items-center min-h-11"><a href="#" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] animate-tbc19-drift transition-[filter] duration-250 hover:[animation-duration:6s] hover:[filter:saturate(1.15)] focus-visible:[animation-duration:6s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 after:content-[''] after:absolute after:inset-x-2 after:bottom-1 after:h-[1.5px] after:rounded-[2px] after:opacity-0 after:scale-x-40 after:origin-left after:transition-[opacity,scale] after:duration-300 after:bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] hover:after:opacity-85 hover:after:scale-x-100 focus-visible:after:opacity-85 focus-visible:after:scale-x-100 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.66_0.24_20)]">Docs</a></li>
      <li class="inline-flex items-center min-h-11 before:content-[''] before:inline-block before:w-1.5 before:h-1.5 before:mx-2.5 before:rotate-[-45deg] before:opacity-70 before:border-r-[1.5px] before:border-b-[1.5px] before:border-tbc19-sep"><a href="#" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] animate-tbc19-drift transition-[filter] duration-250 hover:[animation-duration:6s] hover:[filter:saturate(1.15)] focus-visible:[animation-duration:6s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 after:content-[''] after:absolute after:inset-x-2 after:bottom-1 after:h-[1.5px] after:rounded-[2px] after:opacity-0 after:scale-x-40 after:origin-left after:transition-[opacity,scale] after:duration-300 after:bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] hover:after:opacity-85 hover:after:scale-x-100 focus-visible:after:opacity-85 focus-visible:after:scale-x-100 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.66_0.24_20)]">Guides</a></li>
      <li class="inline-flex items-center min-h-11 before:content-[''] before:inline-block before:w-1.5 before:h-1.5 before:mx-2.5 before:rotate-[-45deg] before:opacity-70 before:border-r-[1.5px] before:border-b-[1.5px] before:border-tbc19-sep"><a href="#" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] animate-tbc19-drift transition-[filter] duration-250 hover:[animation-duration:6s] hover:[filter:saturate(1.15)] focus-visible:[animation-duration:6s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 after:content-[''] after:absolute after:inset-x-2 after:bottom-1 after:h-[1.5px] after:rounded-[2px] after:opacity-0 after:scale-x-40 after:origin-left after:transition-[opacity,scale] after:duration-300 after:bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.72_0.2_25),oklch(0.7_0.2_190),oklch(0.62_0.2_285))] hover:after:opacity-85 hover:after:scale-x-100 focus-visible:after:opacity-85 focus-visible:after:scale-x-100 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.62_0.2_285),oklch(0.68_0.22_320),oklch(0.66_0.24_20)]">Authentication</a></li>
      <li class="inline-flex items-center min-h-11 before:content-[''] before:inline-block before:w-1.5 before:h-1.5 before:mx-2.5 before:rotate-[-45deg] before:opacity-70 before:border-r-[1.5px] before:border-b-[1.5px] before:border-tbc19-sep"><a href="#" aria-current="page" class="relative inline-flex items-center min-h-11 px-2 rounded-lg no-underline font-bold bg-clip-text text-transparent bg-[conic-gradient(from_var(--tbc19-angle),oklch(0.6_0.24_300),oklch(0.68_0.24_340),oklch(0.72_0.22_20),oklch(0.66_0.24_275),oklch(0.6_0.24_300))] animate-tbc19-drift [animation-duration:7s] focus-visible:outline-2 focus-visible:outline-tbc19-focus focus-visible:outline-offset-3 motion-reduce:animate-none motion-reduce:bg-linear-[90deg,oklch(0.6_0.24_300),oklch(0.68_0.24_340),oklch(0.66_0.24_275)]">Magic Links</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@property --tbc19-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@theme {
  --color-tbc19-ink: #3b3f4d;
  --color-tbc19-ink: oklch(0.28 0.02 260);
  --color-tbc19-edge: #e2e4ee;
  --color-tbc19-edge: oklch(0.9 0.01 260 / 0.7);
  --color-tbc19-sep: #b3b6c2;
  --color-tbc19-sep: oklch(0.75 0.02 260);
  --color-tbc19-focus: #7a5cf0;
  --color-tbc19-focus: oklch(0.62 0.2 285);
  --font-tbc19-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --animate-tbc19-drift: tbc19-drift 18s linear infinite;
}

@keyframes tbc19-drift {
  to {
    --tbc19-angle: 360deg;
  }
}

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

How this works

Clipped gradients need transparent ink. bg-clip-text paints the background through the glyphs and text-transparent gets the fill colour out of the way. Tailwind ships both, so the only arbitrary part is the gradient value itself.

The angle is a registered property. @property --tbc19-angle makes it interpolable; the keyframe walks it to 360deg. Because @theme exposes the animation, the markup can still decide the tempo: resting 18s, hover 6s, current crumb 7s — all via [animation-duration:...].

Contrast caveat, handled. Gradient text cannot be contrast-audited as one colour, so every stop sits at or below oklch(0.72) lightness on the near-white bar, and the reduced-motion fallback uses the darkest three stops.

Make it yours

  • Palette: the five conic stops. Keep them within one lightness band or the label flickers between legible and not as it rotates.
  • Tempo: the three [animation-duration:...] values.
  • Bar: bg-white/72 backdrop-blur-[14px] — drop both for gradient text on a plain page.

Gotchas — read before shipping

  • text-transparent without bg-clip-text produces invisible text. They are one unit; never split them across variants.
  • Selected gradient text copies as plain text but renders with no selection highlight in some engines — acceptable on a nav, not on body copy.
  • Windows High Contrast Mode drops the background and leaves transparent glyphs; add a forced-colors:text-[CanvasText] utility if you ship this on a real docs site.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

background-clip:text is Baseline; @property (Firefox 128) gates the rotation only, and the static gradient remains without it.

Techniques used in this demo

Utilitiesfirst-class utility or variant

conic-gradient()tw ↗backdrop-filtertw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@propertytw ↗@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →