39 Tailwind CSS Breadcrumbs
38 / 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 Frosted Glass Dark UI Breadcrumb Component

The dark counterpart to the glassmorphism pill: a translucent charcoal panel over a moody gradient, with a lit top edge, a darkened bottom edge, and cool accent links. Asymmetric border colours do the lighting, which is the detail that separates dark glass from a grey box.

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-38 w-full min-h-svh flex items-center justify-center font-tbc38-sans px-8 py-12 bg-[radial-gradient(120%_140%_at_20%_0%,oklch(0.32_0.09_280),oklch(0.14_0.03_260)_55%,oklch(0.1_0.02_240))]">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center list-none m-0 px-4 py-2.75 rounded-[15px] bg-tbc38-panel border border-tbc38-edge border-b-tbc38-edgedark [backdrop-filter:blur(14px)_saturate(160%)] shadow-[0_10px_40px_oklch(0_0_0/0.4),inset_0_1px_0_oklch(1_0_0/0.12)]">
      <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-medium text-tbc38-ink no-underline transition-colors duration-200 hover:text-white hover:bg-tbc38-hover focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Studio</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2.25 before:text-tbc38-sep"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-medium text-tbc38-ink no-underline transition-colors duration-200 hover:text-white hover:bg-tbc38-hover focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Sessions</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2.25 before:text-tbc38-sep"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-medium text-tbc38-ink no-underline transition-colors duration-200 hover:text-white hover:bg-tbc38-hover focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Mixes</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2.25 before:text-tbc38-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-semibold text-white no-underline bg-[color-mix(in_oklab,var(--color-tbc38-acc)_26%,var(--color-tbc38-solid))] shadow-[inset_0_1px_0_oklch(1_0_0/0.15)] focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2">Midnight Set</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc38-panel: #2b2e3a;
  --color-tbc38-panel: oklch(0.2 0.02 265 / 0.55);
  --color-tbc38-solid: #33374a;
  --color-tbc38-solid: oklch(0.25 0.02 265);
  --color-tbc38-edge: #4e5361;
  --color-tbc38-edge: oklch(0.35 0.02 265 / 0.5);
  --color-tbc38-edgedark: #101218;
  --color-tbc38-edgedark: oklch(0.08 0.01 265 / 0.6);
  --color-tbc38-ink: #d8dae2;
  --color-tbc38-ink: oklch(0.88 0.02 265);
  --color-tbc38-hover: #4d5260;
  --color-tbc38-hover: oklch(0.4 0.02 265 / 0.5);
  --color-tbc38-sep: #8b909d;
  --color-tbc38-sep: oklch(0.63 0.02 265);
  --color-tbc38-acc: #63c8dc;
  --color-tbc38-acc: oklch(0.72 0.15 200);
  --font-tbc38-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-38 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 16.4 backdrop-filter prefix. */

.tbc-38 ol {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

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-tbc38-panel: #2b2e3a;
  --color-tbc38-panel: oklch(0.2 0.02 265 / 0.55);
  --color-tbc38-solid: #33374a;
  --color-tbc38-solid: oklch(0.25 0.02 265);
  --color-tbc38-edge: #4e5361;
  --color-tbc38-edge: oklch(0.35 0.02 265 / 0.5);
  --color-tbc38-edgedark: #101218;
  --color-tbc38-edgedark: oklch(0.08 0.01 265 / 0.6);
  --color-tbc38-ink: #d8dae2;
  --color-tbc38-ink: oklch(0.88 0.02 265);
  --color-tbc38-hover: #4d5260;
  --color-tbc38-hover: oklch(0.4 0.02 265 / 0.5);
  --color-tbc38-sep: #8b909d;
  --color-tbc38-sep: oklch(0.63 0.02 265);
  --color-tbc38-acc: #63c8dc;
  --color-tbc38-acc: oklch(0.72 0.15 200);
  --font-tbc38-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-38 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 16.4 backdrop-filter prefix. */

.tbc-38 ol {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
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.

  • border-b-tbc38-edgedark after a plain border-tbc38-edge is the tidiest thing in this port: the CSS version needed a separate border-bottom-color declaration, and the utility order does it in place.
  • A translucent token in @theme works fine (oklch(... / 0.55)), but the current crumb needs a SOLID counterpart to mix against — hence the extra --color-tbc38-solid entry.
  • UI change from the CSS original: link ink went from oklch(0.82) to 0.88 and the separator from 0.6 to 0.63, both of which were borderline against the lighter top-left of the gradient stage.
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 Frosted Glass Dark UI Breadcrumb Component
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-frosted-glass-dark-ui-breadcrumb-component/

The dark counterpart to the glassmorphism pill: a translucent charcoal panel over a moody gradient, with a lit top edge, a darkened bottom edge, and cool accent links. Asymmetric border colours do the lighting, which is the detail that separates dark glass from a grey box.
## HTML
```html
<section class="tbc-38 w-full min-h-svh flex items-center justify-center font-tbc38-sans px-8 py-12 bg-[radial-gradient(120%_140%_at_20%_0%,oklch(0.32_0.09_280),oklch(0.14_0.03_260)_55%,oklch(0.1_0.02_240))]">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center list-none m-0 px-4 py-2.75 rounded-[15px] bg-tbc38-panel border border-tbc38-edge border-b-tbc38-edgedark [backdrop-filter:blur(14px)_saturate(160%)] shadow-[0_10px_40px_oklch(0_0_0/0.4),inset_0_1px_0_oklch(1_0_0/0.12)]">
      <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-medium text-tbc38-ink no-underline transition-colors duration-200 hover:text-white hover:bg-tbc38-hover focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Studio</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2.25 before:text-tbc38-sep"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-medium text-tbc38-ink no-underline transition-colors duration-200 hover:text-white hover:bg-tbc38-hover focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Sessions</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2.25 before:text-tbc38-sep"><a href="#" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-medium text-tbc38-ink no-underline transition-colors duration-200 hover:text-white hover:bg-tbc38-hover focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Mixes</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2.25 before:text-tbc38-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-2.5 rounded-[9px] text-sm font-semibold text-white no-underline bg-[color-mix(in_oklab,var(--color-tbc38-acc)_26%,var(--color-tbc38-solid))] shadow-[inset_0_1px_0_oklch(1_0_0/0.15)] focus-visible:outline-2 focus-visible:outline-tbc38-acc focus-visible:outline-offset-2">Midnight Set</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc38-panel: #2b2e3a;
  --color-tbc38-panel: oklch(0.2 0.02 265 / 0.55);
  --color-tbc38-solid: #33374a;
  --color-tbc38-solid: oklch(0.25 0.02 265);
  --color-tbc38-edge: #4e5361;
  --color-tbc38-edge: oklch(0.35 0.02 265 / 0.5);
  --color-tbc38-edgedark: #101218;
  --color-tbc38-edgedark: oklch(0.08 0.01 265 / 0.6);
  --color-tbc38-ink: #d8dae2;
  --color-tbc38-ink: oklch(0.88 0.02 265);
  --color-tbc38-hover: #4d5260;
  --color-tbc38-hover: oklch(0.4 0.02 265 / 0.5);
  --color-tbc38-sep: #8b909d;
  --color-tbc38-sep: oklch(0.63 0.02 265);
  --color-tbc38-acc: #63c8dc;
  --color-tbc38-acc: oklch(0.72 0.15 200);
  --font-tbc38-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-38 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 16.4 backdrop-filter prefix. */

.tbc-38 ol {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
```

How this works

Dark glass is about edges. A translucent panel alone reads flat; the top border one stop lighter and the bottom one much darker implies a light source, and the inset white hairline finishes it. Three utilities, and it is the difference between glass and a rectangle.

The tint mixes against the panel, not transparency. Mixing the accent into the panel colour keeps the current crumb legible regardless of what shows through the blur — mixing to transparent would let the gradient behind it change the label's contrast.

Cool accent, warm nothing. One cyan token for the focus rings and the current tint; everything else is neutral, which is what keeps a dark dashboard from looking like a toy.

Make it yours

  • Frost: the blur(14px) and saturate(160%) pair.
  • Edges: --color-tbc38-edge and --color-tbc38-edgedark — the lighting model.
  • Stage: the radial gradient; dark glass needs something behind it to be glass at all.

Gotchas — read before shipping

  • Over a solid dark background the blur does nothing and the panel is just translucent grey — the gradient stage is part of the component.
  • White text at 82% on a translucent panel can dip below AA where the gradient is lightest; the labels here sit at full-opacity oklch(0.88) for that reason.
  • -webkit-backdrop-filter is still required for Safari < 16.4 and Tailwind's arbitrary property emits only the standard form.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Baseline (Firefox 103+); without it the panel degrades to a flat translucent charcoal, which still works in dark UI.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗color-mix()tw ↗radial-gradient()tw ↗transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →