39 Tailwind CSS Breadcrumbs
26 / 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 Minimalist Breadcrumb with Swappable Masked SVG Separators

The cleanest trail in the collection: plain text links divided by a masked SVG chevron that inherits the crumb's colour, so switching the divider — slash, dot, chevron, anything — is a one-property edit. Everything else is four utilities.

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-26 w-full min-h-svh grid place-items-center bg-tbc26-bg font-tbc26-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center list-none m-0 p-0 text-tbc26-mut">
      <li class="flex items-center"><a href="#" class="px-1 py-0.75 rounded-md text-sm font-medium tracking-[0.01em] text-tbc26-link no-underline transition-colors duration-150 hover:text-tbc26-acc focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">Home</a></li>
      <li class="flex items-center before:content-[''] before:w-3.5 before:h-3.5 before:mx-2.5 before:opacity-50 before:bg-current before:[mask-image:var(--tbc26-sep)] before:[mask-size:contain] before:[mask-position:center] before:[mask-repeat:no-repeat]"><a href="#" class="px-1 py-0.75 rounded-md text-sm font-medium tracking-[0.01em] text-tbc26-link no-underline transition-colors duration-150 hover:text-tbc26-acc focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">Blog</a></li>
      <li class="flex items-center before:content-[''] before:w-3.5 before:h-3.5 before:mx-2.5 before:opacity-50 before:bg-current before:[mask-image:var(--tbc26-sep)] before:[mask-size:contain] before:[mask-position:center] before:[mask-repeat:no-repeat]"><a href="#" class="px-1 py-0.75 rounded-md text-sm font-medium tracking-[0.01em] text-tbc26-link no-underline transition-colors duration-150 hover:text-tbc26-acc focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">CSS</a></li>
      <li class="flex items-center text-tbc26-strong before:content-[''] before:w-3.5 before:h-3.5 before:mx-2.5 before:opacity-50 before:bg-current before:[mask-image:var(--tbc26-sep)] before:[mask-size:contain] before:[mask-position:center] before:[mask-repeat:no-repeat]"><a href="#" aria-current="page" class="px-1 py-0.75 rounded-md text-sm font-semibold tracking-[0.01em] text-tbc26-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">Minimal Separators</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc26-bg: #fdfdfe;
  --color-tbc26-bg: oklch(0.99 0.003 250);
  --color-tbc26-mut: #82858f;
  --color-tbc26-mut: oklch(0.58 0.01 250);
  --color-tbc26-link: #6a6d78;
  --color-tbc26-link: oklch(0.5 0.02 250);
  --color-tbc26-strong: #414449;
  --color-tbc26-strong: oklch(0.3 0.01 250);
  --color-tbc26-acc: #4a62cc;
  --color-tbc26-acc: oklch(0.52 0.16 265);
  --font-tbc26-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* The separator glyph: one plain custom property, deliberately not an @theme entry. */

.tbc-26 {
  width: 100%;
  min-height: 100svh;
  --tbc26-sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Safari < 15.4 mask prefix. */

.tbc-26 li::before {
  -webkit-mask: var(--tbc26-sep) center/contain no-repeat;
}

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-tbc26-bg: #fdfdfe;
  --color-tbc26-bg: oklch(0.99 0.003 250);
  --color-tbc26-mut: #82858f;
  --color-tbc26-mut: oklch(0.58 0.01 250);
  --color-tbc26-link: #6a6d78;
  --color-tbc26-link: oklch(0.5 0.02 250);
  --color-tbc26-strong: #414449;
  --color-tbc26-strong: oklch(0.3 0.01 250);
  --color-tbc26-acc: #4a62cc;
  --color-tbc26-acc: oklch(0.52 0.16 265);
  --font-tbc26-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* The separator glyph: one plain custom property, deliberately not an @theme entry. */

.tbc-26 {
  width: 100%;
  min-height: 100svh;
  --tbc26-sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Safari < 15.4 mask prefix. */

.tbc-26 li::before {
  -webkit-mask: var(--tbc26-sep) center/contain no-repeat;
}
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.

  • This is the demo that argues for keeping ONE custom property after a port. A masked divider repeated on every crumb wants a single source; the utilities handle geometry, the property handles the glyph.
  • before:bg-current is the coupling that makes the separator theme-proof — the pseudo-element cannot drift from its crumb's colour because it has none of its own.
  • UI change from the CSS original: the muted list colour was darkened one step so the 50%-opacity dividers still read against the near-white page; at the original value they nearly vanished.
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 Minimalist Breadcrumb with Swappable Masked SVG Separators
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-minimalist-breadcrumb-masked-svg-separators/

The cleanest trail in the collection: plain text links divided by a masked SVG chevron that inherits the crumb's colour, so switching the divider &mdash; slash, dot, chevron, anything &mdash; is a one-property edit. Everything else is four utilities.
## HTML
```html
<section class="tbc-26 w-full min-h-svh grid place-items-center bg-tbc26-bg font-tbc26-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center list-none m-0 p-0 text-tbc26-mut">
      <li class="flex items-center"><a href="#" class="px-1 py-0.75 rounded-md text-sm font-medium tracking-[0.01em] text-tbc26-link no-underline transition-colors duration-150 hover:text-tbc26-acc focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">Home</a></li>
      <li class="flex items-center before:content-[''] before:w-3.5 before:h-3.5 before:mx-2.5 before:opacity-50 before:bg-current before:[mask-image:var(--tbc26-sep)] before:[mask-size:contain] before:[mask-position:center] before:[mask-repeat:no-repeat]"><a href="#" class="px-1 py-0.75 rounded-md text-sm font-medium tracking-[0.01em] text-tbc26-link no-underline transition-colors duration-150 hover:text-tbc26-acc focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">Blog</a></li>
      <li class="flex items-center before:content-[''] before:w-3.5 before:h-3.5 before:mx-2.5 before:opacity-50 before:bg-current before:[mask-image:var(--tbc26-sep)] before:[mask-size:contain] before:[mask-position:center] before:[mask-repeat:no-repeat]"><a href="#" class="px-1 py-0.75 rounded-md text-sm font-medium tracking-[0.01em] text-tbc26-link no-underline transition-colors duration-150 hover:text-tbc26-acc focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">CSS</a></li>
      <li class="flex items-center text-tbc26-strong before:content-[''] before:w-3.5 before:h-3.5 before:mx-2.5 before:opacity-50 before:bg-current before:[mask-image:var(--tbc26-sep)] before:[mask-size:contain] before:[mask-position:center] before:[mask-repeat:no-repeat]"><a href="#" aria-current="page" class="px-1 py-0.75 rounded-md text-sm font-semibold tracking-[0.01em] text-tbc26-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc26-acc focus-visible:outline-offset-2">Minimal Separators</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc26-bg: #fdfdfe;
  --color-tbc26-bg: oklch(0.99 0.003 250);
  --color-tbc26-mut: #82858f;
  --color-tbc26-mut: oklch(0.58 0.01 250);
  --color-tbc26-link: #6a6d78;
  --color-tbc26-link: oklch(0.5 0.02 250);
  --color-tbc26-strong: #414449;
  --color-tbc26-strong: oklch(0.3 0.01 250);
  --color-tbc26-acc: #4a62cc;
  --color-tbc26-acc: oklch(0.52 0.16 265);
  --font-tbc26-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* The separator glyph: one plain custom property, deliberately not an @theme entry. */

.tbc-26 {
  width: 100%;
  min-height: 100svh;
  --tbc26-sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Safari < 15.4 mask prefix. */

.tbc-26 li::before {
  -webkit-mask: var(--tbc26-sep) center/contain no-repeat;
}
```

How this works

currentColor plus a mask is the whole idea. The pseudo-element is a 14px box filled with bg-current and shaped by the mask, so it picks up whatever colour the crumb has — including in dark mode, including on a themed page, with no second variable to keep in sync.

The separator is one property. Swapping chevron for slash or dot means editing --tbc26-sep once. That is strictly better than the utility-only alternative, which would mean editing every crumb.

Restraint is the point. No shadows, no fills, no motion beyond a colour transition. Ship this on a content site and it will still look right in five years.

Make it yours

  • Divider: --tbc26-sep. Any single-path 24×24 SVG works; keep stroke='black' in the URI — the mask only reads alpha.
  • Weight: before:opacity-50 and before:w-3.5.
  • For a text glyph instead, delete the mask utilities and use before:content-['/'].

Gotchas — read before shipping

  • Mask URIs need the -webkit-mask prefix for older Safari, which the stylesheet ships.
  • bg-current on a masked pseudo-element is what couples the divider to the text colour; a hard-coded bg-* silently breaks theming.
  • Keep the divider out of the accessibility tree — pseudo-elements already are, which is why this is the recommended pattern over an inline <svg> per crumb.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

mask-image is Baseline with the -webkit- prefix for Safari < 15.4; nothing else here is modern.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗pseudo elementstw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →