39 Tailwind CSS Breadcrumbs
02 / 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 Responsive Collapsing Breadcrumb Bar with Container Queries

A trail that truncates itself in a narrow column with zero JavaScript: intermediate crumbs collapse behind an ellipsis, and the ellipsis expands them back. The port upgrades the interaction — the CSS original expanded on hover, which touch users cannot do; here a real checkbox holds the expanded state and has-checked: reads it, so tap, click and keyboard all work.

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-02 w-full min-h-svh grid place-items-center bg-tbc02-bg font-tbc02-sans text-tbc02-ink px-5 py-9">
  <div class="@container/bar w-[min(560px,100%)] px-4 py-3 rounded-2xl bg-tbc02-panel border border-tbc02-edge">
    <nav aria-label="Breadcrumb">
      <ol class="group flex items-center list-none m-0 p-0">
        <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline transition-colors duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2">Home</a></li>
        <li class="hidden @max-lg/bar:flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep">
          <input type="checkbox" id="tbc02-expand" class="peer sr-only">
          <label for="tbc02-expand" class="grid place-items-center min-w-11 min-h-9 px-2 rounded-lg bg-tbc02-chip text-tbc02-mut font-bold text-[15px] cursor-pointer transition-[opacity,background] duration-200 hover:bg-tbc02-chiphover hover:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-tbc02-acc peer-focus-visible:outline-offset-2 peer-checked:opacity-0 peer-checked:pointer-events-none">&hellip;<span class="sr-only">Show collapsed breadcrumbs</span></label>
        </li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep @max-lg/bar:before:hidden group-has-checked:before:inline!"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline whitespace-nowrap overflow-hidden max-w-[14ch] transition-[max-width,opacity,padding] duration-300 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2 @max-lg/bar:[max-width:0] @max-lg/bar:opacity-0 @max-lg/bar:px-0 group-has-checked:max-w-[14ch]! group-has-checked:opacity-100! group-has-checked:px-1.5! motion-reduce:transition-none">Store</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep @max-lg/bar:before:hidden group-has-checked:before:inline!"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline whitespace-nowrap overflow-hidden max-w-[14ch] transition-[max-width,opacity,padding] duration-300 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2 @max-lg/bar:[max-width:0] @max-lg/bar:opacity-0 @max-lg/bar:px-0 group-has-checked:max-w-[14ch]! group-has-checked:opacity-100! group-has-checked:px-1.5! motion-reduce:transition-none">Women</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep @max-lg/bar:before:hidden group-has-checked:before:inline!"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline whitespace-nowrap overflow-hidden max-w-[14ch] transition-[max-width,opacity,padding] duration-300 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2 @max-lg/bar:[max-width:0] @max-lg/bar:opacity-0 @max-lg/bar:px-0 group-has-checked:max-w-[14ch]! group-has-checked:opacity-100! group-has-checked:px-1.5! motion-reduce:transition-none">Outerwear</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-1.5 rounded-md text-sm font-semibold text-white no-underline whitespace-nowrap focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2">Wool Coat</a></li>
      </ol>
    </nav>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tbc02-bg: #15161f;
  --color-tbc02-bg: oklch(0.14 0.02 265);
  --color-tbc02-panel: #1d1f2b;
  --color-tbc02-panel: oklch(0.19 0.02 265);
  --color-tbc02-edge: #2d2f3d;
  --color-tbc02-edge: oklch(0.26 0.02 265);
  --color-tbc02-chip: #2a2c3a;
  --color-tbc02-chip: oklch(0.24 0.02 265);
  --color-tbc02-chiphover: #3a3d4f;
  --color-tbc02-chiphover: oklch(0.32 0.03 265);
  --color-tbc02-ink: #e3e3ea;
  --color-tbc02-ink: oklch(0.9 0.01 265);
  --color-tbc02-mut: #b7b9c9;
  --color-tbc02-mut: oklch(0.78 0.03 265);
  --color-tbc02-sep: #7c7f93;
  --color-tbc02-sep: oklch(0.55 0.02 265);
  --color-tbc02-acc: #8f8ae8;
  --color-tbc02-acc: oklch(0.72 0.15 285);
  --font-tbc02-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-02 {
  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-tbc02-bg: #15161f;
  --color-tbc02-bg: oklch(0.14 0.02 265);
  --color-tbc02-panel: #1d1f2b;
  --color-tbc02-panel: oklch(0.19 0.02 265);
  --color-tbc02-edge: #2d2f3d;
  --color-tbc02-edge: oklch(0.26 0.02 265);
  --color-tbc02-chip: #2a2c3a;
  --color-tbc02-chip: oklch(0.24 0.02 265);
  --color-tbc02-chiphover: #3a3d4f;
  --color-tbc02-chiphover: oklch(0.32 0.03 265);
  --color-tbc02-ink: #e3e3ea;
  --color-tbc02-ink: oklch(0.9 0.01 265);
  --color-tbc02-mut: #b7b9c9;
  --color-tbc02-mut: oklch(0.78 0.03 265);
  --color-tbc02-sep: #7c7f93;
  --color-tbc02-sep: oklch(0.55 0.02 265);
  --color-tbc02-acc: #8f8ae8;
  --color-tbc02-acc: oklch(0.72 0.15 285);
  --font-tbc02-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-02 {
  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&family=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

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

  • The @container (max-width:480px) block dissolves into @max-lg/bar: variants on the four elements that actually change. The named container is what makes that readable — an unnamed @max-lg: would silently bind to the nearest container, whichever that turns out to be.
  • UI change from the CSS original: hover-expand is replaced by a checkbox the ellipsis toggles. Hover-only disclosure is unreachable on touch, and this is the collection's clearest case of the port improving the interaction rather than translating it.
  • group-has-checked: and peer-checked: are used together on purpose: the crumbs are cousins of the input (so the group + :has() form), the label is its sibling (so peer).
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 Responsive Collapsing Breadcrumb Bar with Container Queries
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-responsive-collapsing-breadcrumb-container-queries/

A trail that truncates itself in a narrow column with zero JavaScript: intermediate crumbs collapse behind an ellipsis, and the ellipsis expands them back. The port upgrades the interaction — the CSS original expanded on hover, which touch users cannot do; here a real checkbox holds the expanded state and has-checked: reads it, so tap, click and keyboard all work.
## HTML
```html
<section class="tbc-02 w-full min-h-svh grid place-items-center bg-tbc02-bg font-tbc02-sans text-tbc02-ink px-5 py-9">
  <div class="@container/bar w-[min(560px,100%)] px-4 py-3 rounded-2xl bg-tbc02-panel border border-tbc02-edge">
    <nav aria-label="Breadcrumb">
      <ol class="group flex items-center list-none m-0 p-0">
        <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline transition-colors duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2">Home</a></li>
        <li class="hidden @max-lg/bar:flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep">
          <input type="checkbox" id="tbc02-expand" class="peer sr-only">
          <label for="tbc02-expand" class="grid place-items-center min-w-11 min-h-9 px-2 rounded-lg bg-tbc02-chip text-tbc02-mut font-bold text-[15px] cursor-pointer transition-[opacity,background] duration-200 hover:bg-tbc02-chiphover hover:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-tbc02-acc peer-focus-visible:outline-offset-2 peer-checked:opacity-0 peer-checked:pointer-events-none">&hellip;<span class="sr-only">Show collapsed breadcrumbs</span></label>
        </li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep @max-lg/bar:before:hidden group-has-checked:before:inline!"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline whitespace-nowrap overflow-hidden max-w-[14ch] transition-[max-width,opacity,padding] duration-300 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2 @max-lg/bar:[max-width:0] @max-lg/bar:opacity-0 @max-lg/bar:px-0 group-has-checked:max-w-[14ch]! group-has-checked:opacity-100! group-has-checked:px-1.5! motion-reduce:transition-none">Store</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep @max-lg/bar:before:hidden group-has-checked:before:inline!"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline whitespace-nowrap overflow-hidden max-w-[14ch] transition-[max-width,opacity,padding] duration-300 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2 @max-lg/bar:[max-width:0] @max-lg/bar:opacity-0 @max-lg/bar:px-0 group-has-checked:max-w-[14ch]! group-has-checked:opacity-100! group-has-checked:px-1.5! motion-reduce:transition-none">Women</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep @max-lg/bar:before:hidden group-has-checked:before:inline!"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-sm text-tbc02-mut no-underline whitespace-nowrap overflow-hidden max-w-[14ch] transition-[max-width,opacity,padding] duration-300 hover:text-white focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2 @max-lg/bar:[max-width:0] @max-lg/bar:opacity-0 @max-lg/bar:px-0 group-has-checked:max-w-[14ch]! group-has-checked:opacity-100! group-has-checked:px-1.5! motion-reduce:transition-none">Outerwear</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc02-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-1.5 rounded-md text-sm font-semibold text-white no-underline whitespace-nowrap focus-visible:outline-2 focus-visible:outline-tbc02-acc focus-visible:outline-offset-2">Wool Coat</a></li>
      </ol>
    </nav>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc02-bg: #15161f;
  --color-tbc02-bg: oklch(0.14 0.02 265);
  --color-tbc02-panel: #1d1f2b;
  --color-tbc02-panel: oklch(0.19 0.02 265);
  --color-tbc02-edge: #2d2f3d;
  --color-tbc02-edge: oklch(0.26 0.02 265);
  --color-tbc02-chip: #2a2c3a;
  --color-tbc02-chip: oklch(0.24 0.02 265);
  --color-tbc02-chiphover: #3a3d4f;
  --color-tbc02-chiphover: oklch(0.32 0.03 265);
  --color-tbc02-ink: #e3e3ea;
  --color-tbc02-ink: oklch(0.9 0.01 265);
  --color-tbc02-mut: #b7b9c9;
  --color-tbc02-mut: oklch(0.78 0.03 265);
  --color-tbc02-sep: #7c7f93;
  --color-tbc02-sep: oklch(0.55 0.02 265);
  --color-tbc02-acc: #8f8ae8;
  --color-tbc02-acc: oklch(0.72 0.15 285);
  --font-tbc02-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

The container query becomes a named variant. The wrapper declares @container/bar (which compiles to container-type:inline-size plus a name), and every collapsing utility rides @max-lg/bar:. Drop the component in a 300px sidebar on a 4K monitor and it still collapses, exactly as the CSS version did — but the threshold now reads as a breakpoint name in the class list rather than a magic number in a media block.

Hover-to-expand becomes tap-to-expand. The original keyed the reveal off ol:hover. A hidden <input type="checkbox"> now holds that state, the ellipsis is its <label>, and the intermediate crumbs read group-has-checked:max-w-[14ch]!. Pointer, touch and keyboard reach the same state, and peer-checked: hides the ellipsis once it has done its job.

Animating to a concrete width, still. You cannot tween to max-width:none, so both ends are real values: [max-width:0] collapsed, max-w-[14ch] open, with overflow-hidden and whitespace-nowrap on the link.

Make it yours

  • Collapse threshold: swap @max-lg/bar: for @max-md/bar: or an arbitrary @max-[480px]/bar:.
  • Keep more context by moving the collapsing utilities off the second crumb — the pattern is per-element, so exempting one is deleting its classes.
  • Reveal width is max-w-[14ch]; raise it for long category names.

Gotchas — read before shipping

  • @container/bar needs a resolvable inline size on the wrapper, or the query never fires.
  • The ellipsis must stay in the DOM and focusable. It is a <label> for a real checkbox, hidden with peer-checked:opacity-0 peer-checked:pointer-events-none rather than hidden, so keyboard users keep the affordance.
  • The expanded overrides carry the ! important flag and NO @max-lg/bar: prefix, on purpose: the collapsed values sit inside a @container block emitted at the very end of the utilities layer, so the expand rule must beat a later-emitted competitor, and ! states that instead of relying on specificity arithmetic. Unprefixed is safe because at full width the expanded values equal the resting ones.
  • group-has-checked: compiles to .group:has(:checked) &, so the group must sit on a shared ancestor of the checkbox AND the crumbs — the <ol>. Putting a bare has-checked: on the links instead silently never matches: a link has no checkbox inside it.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Size container queries and :has() are the gate — both Baseline since 2023. Without :has() the ellipsis simply shows alongside the full trail, which is still usable.

Techniques used in this demo

Utilitiesfirst-class utility or variant

container queriestw ↗:has()tw ↗transitionstw ↗prefers-reduced-motiontw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →