39 Tailwind CSS Breadcrumbs
05 / 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 Glassmorphism Floating Breadcrumb Pill with Shimmer Sweep

A frosted-glass breadcrumb pill floating over a colour field: heavy backdrop-blur and saturation, a light-catching gradient hairline, and a shimmer that sweeps across the bar on hover or keyboard focus. The premium floating-UI treatment, kept readable at AA and reachable from the keyboard.

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-05 w-full min-h-svh grid place-items-center px-8 py-12 font-tbc05-sans bg-linear-[120deg,oklch(0.55_0.2_300),oklch(0.6_0.18_220)_45%,oklch(0.68_0.16_180)]">
  <nav aria-label="Breadcrumb" class="group relative overflow-hidden rounded-2xl border border-transparent bg-[linear-gradient(oklch(1_0_0/0.12),oklch(1_0_0/0.08))_padding-box,linear-gradient(155deg,oklch(1_0_0/0.7),oklch(1_0_0/0.15)_40%,oklch(1_0_0/0.04))_border-box] [backdrop-filter:blur(12px)_saturate(180%)] shadow-[0_8px_32px_oklch(0_0_0/0.12),inset_0_1px_0_oklch(1_0_0/0.25)] after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:-translate-x-[120%] after:bg-linear-[115deg,transparent_40%,oklch(1_0_0/0.35)_50%,transparent_60%] after:transition-transform after:duration-700 group-hover:after:translate-x-[220%] group-focus-within:after:translate-x-[220%] motion-reduce:after:hidden">
    <ol class="relative z-1 flex flex-wrap items-center list-none m-0 px-4 py-2.5">
      <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-semibold text-white/85 no-underline transition-colors duration-200 hover:text-white hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Home</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-white/60"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-semibold text-white/85 no-underline transition-colors duration-200 hover:text-white hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Gallery</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-white/60"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-semibold text-white/85 no-underline transition-colors duration-200 hover:text-white hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Collections</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-white/60"><a href="#" aria-current="page" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-bold text-white no-underline bg-white/22 shadow-[inset_0_1px_0_oklch(1_0_0/0.3)] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Aurora Series</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --font-tbc05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-05 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 16.4 backdrop-filter prefix; Tailwind's arbitrary property emits the
   unprefixed form only. */

.tbc-05 nav {
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

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 {
  --font-tbc05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-05 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 16.4 backdrop-filter prefix; Tailwind's arbitrary property emits the
   unprefixed form only. */

.tbc-05 nav {
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
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.

  • The ol::after shimmer rule becomes eight after: utilities on the nav, and the hover trigger becomes group-hover:after:. This is the port at its most verbose — and the most honest place to say so.
  • UI change from the CSS original: the sweep now also fires on group-focus-within:, so tabbing into the trail produces the same light pass a mouse gets. Hover-only delight is delight only some users receive.
  • Composing blur() and saturate() in ONE arbitrary backdrop-filter rather than stacking backdrop-blur-md backdrop-saturate-[180%] keeps the tuned pair visible as a pair; both compile to the same declaration.
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 Glassmorphism Floating Breadcrumb Pill with Shimmer Sweep
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-glassmorphism-floating-breadcrumb-shimmer-sweep/

A frosted-glass breadcrumb pill floating over a colour field: heavy backdrop-blur and saturation, a light-catching gradient hairline, and a shimmer that sweeps across the bar on hover or keyboard focus. The premium floating-UI treatment, kept readable at AA and reachable from the keyboard.
## HTML
```html
<section class="tbc-05 w-full min-h-svh grid place-items-center px-8 py-12 font-tbc05-sans bg-linear-[120deg,oklch(0.55_0.2_300),oklch(0.6_0.18_220)_45%,oklch(0.68_0.16_180)]">
  <nav aria-label="Breadcrumb" class="group relative overflow-hidden rounded-2xl border border-transparent bg-[linear-gradient(oklch(1_0_0/0.12),oklch(1_0_0/0.08))_padding-box,linear-gradient(155deg,oklch(1_0_0/0.7),oklch(1_0_0/0.15)_40%,oklch(1_0_0/0.04))_border-box] [backdrop-filter:blur(12px)_saturate(180%)] shadow-[0_8px_32px_oklch(0_0_0/0.12),inset_0_1px_0_oklch(1_0_0/0.25)] after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:-translate-x-[120%] after:bg-linear-[115deg,transparent_40%,oklch(1_0_0/0.35)_50%,transparent_60%] after:transition-transform after:duration-700 group-hover:after:translate-x-[220%] group-focus-within:after:translate-x-[220%] motion-reduce:after:hidden">
    <ol class="relative z-1 flex flex-wrap items-center list-none m-0 px-4 py-2.5">
      <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-semibold text-white/85 no-underline transition-colors duration-200 hover:text-white hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Home</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-white/60"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-semibold text-white/85 no-underline transition-colors duration-200 hover:text-white hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Gallery</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-white/60"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-semibold text-white/85 no-underline transition-colors duration-200 hover:text-white hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Collections</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-white/60"><a href="#" aria-current="page" class="flex items-center min-h-9 px-2.5 rounded-lg text-sm font-bold text-white no-underline bg-white/22 shadow-[inset_0_1px_0_oklch(1_0_0/0.3)] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Aurora Series</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --font-tbc05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-05 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 16.4 backdrop-filter prefix; Tailwind's arbitrary property emits the
   unprefixed form only. */

.tbc-05 nav {
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
```

How this works

The glass recipe is two utilities and one arbitrary filter. A 12% white fill under blur(12px) saturate(180%) lets the backdrop bleed through as saturated colour rather than grey mud. Tailwind has backdrop-blur-* and backdrop-saturate-* separately, and composing them as one arbitrary [backdrop-filter:...] keeps the pair tuned together — the same argument the hamburger collection makes for composed transforms.

The lit rim is a border-box gradient. border-transparent plus a background that paints one gradient into padding-box and a brighter one into border-box produces a hairline that catches light at the top-left and fades at the bottom-right. One arbitrary value, no extra element.

The sweep is a pseudo-element on a group. after:translate-x-[-120%] at rest, group-hover:after:translate-x-[220%] with a 700ms transition, pointer-events-none so it never eats a click. The group-focus-within: twin fires the same sweep when a link inside receives keyboard focus.

Make it yours

  • Frost strength: the blur(12px) and saturate(180%) values. Below 8px the glass reads as flat translucency.
  • Sweep speed and angle: the duration-700 and the gradient angle in the after:bg-[...] value.
  • Over photography rather than a gradient, raise the fill to bg-white/20 — text contrast over images is the real constraint, not the blur.

Gotchas — read before shipping

  • backdrop-filter needs something behind it. Over a solid background the whole effect is invisible, which is why the stage ships a gradient.
  • Glass text contrast depends on the backdrop: at text-white/82 the links pass AA over this gradient and would fail over a pale one. Test against the real background.
  • The shimmer must carry pointer-events-none, or it intercepts clicks on the crumbs beneath it.
  • overflow-hidden on the pill is what keeps the sweep inside the rounded corners; without it the gradient bleeds past the radius.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Baseline (Firefox 103+); the gradient-border technique works everywhere background-clip does. Without backdrop-filter the pill degrades to a translucent white fill, which is still legible.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗transitionstw ↗prefers-reduced-motiontw ↗pseudo elementstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →