39 Tailwind CSS Breadcrumbs
24 / 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 Multi-Line Aligned Breadcrumb Layout with CSS Subgrid

A trail whose icon, label and separator stay in perfect vertical alignment even when it wraps over several lines — each crumb inherits the parent's column tracks with subgrid. The port keeps both track declarations arbitrary, because a track list is not a design-scale value.

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-24 w-full min-h-svh grid place-items-center bg-tbc24-bg font-tbc24-sans px-7 py-7">
  <nav aria-label="Breadcrumb" class="max-w-[520px]">
    <ol class="grid justify-start items-center gap-x-2.25 gap-y-2.5 list-none m-0 p-0 [grid-template-columns:repeat(3,auto)]">
      <li class="grid items-center gap-2.25 col-span-3 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><a href="#" class="px-1 py-0.75 rounded-md text-sm font-semibold text-tbc24-link no-underline transition-colors duration-150 hover:text-tbc24-linkhover hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">Home</a><span aria-hidden="true" class="justify-self-center text-[15px] text-tbc24-sep">&rsaquo;</span></li>
      <li class="grid items-center gap-2.25 col-span-3 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg><a href="#" class="px-1 py-0.75 rounded-md text-sm font-semibold text-tbc24-link no-underline transition-colors duration-150 hover:text-tbc24-linkhover hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">Documentation</a><span aria-hidden="true" class="justify-self-center text-[15px] text-tbc24-sep">&rsaquo;</span></li>
      <li class="grid items-center gap-2.25 col-span-3 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><path d="M4 6h16M4 12h16M4 18h10"/></svg><a href="#" class="px-1 py-0.75 rounded-md text-sm font-semibold text-tbc24-link no-underline transition-colors duration-150 hover:text-tbc24-linkhover hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">CSS Layout Techniques</a><span aria-hidden="true" class="justify-self-center text-[15px] text-tbc24-sep">&rsaquo;</span></li>
      <li aria-current="page" class="grid items-center gap-2.25 col-span-2 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/></svg><a href="#" aria-current="page" class="px-1 py-0.75 rounded-md text-sm font-bold text-tbc24-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">Subgrid Alignment Guide</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc24-bg: #f4f7f8;
  --color-tbc24-bg: oklch(0.97 0.006 200);
  --color-tbc24-icon: #5f8894;
  --color-tbc24-icon: oklch(0.55 0.06 200);
  --color-tbc24-link: #3d6b80;
  --color-tbc24-link: oklch(0.45 0.08 210);
  --color-tbc24-linkhover: #2b5a75;
  --color-tbc24-linkhover: oklch(0.38 0.13 215);
  --color-tbc24-strong: #2b3339;
  --color-tbc24-strong: oklch(0.3 0.02 210);
  --color-tbc24-sep: #a9bcc2;
  --color-tbc24-sep: oklch(0.72 0.03 200);
  --color-tbc24-acc: #1b6f95;
  --color-tbc24-acc: oklch(0.5 0.15 215);
  --font-tbc24-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-24 {
  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-tbc24-bg: #f4f7f8;
  --color-tbc24-bg: oklch(0.97 0.006 200);
  --color-tbc24-icon: #5f8894;
  --color-tbc24-icon: oklch(0.55 0.06 200);
  --color-tbc24-link: #3d6b80;
  --color-tbc24-link: oklch(0.45 0.08 210);
  --color-tbc24-linkhover: #2b5a75;
  --color-tbc24-linkhover: oklch(0.38 0.13 215);
  --color-tbc24-strong: #2b3339;
  --color-tbc24-strong: oklch(0.3 0.02 210);
  --color-tbc24-sep: #a9bcc2;
  --color-tbc24-sep: oklch(0.72 0.03 200);
  --color-tbc24-acc: #1b6f95;
  --color-tbc24-acc: oklch(0.5 0.15 215);
  --font-tbc24-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

  • Both grid declarations stay arbitrary, and that is the right call: repeat(3,auto) and subgrid are structural values, not tokens, and Tailwind ships no scale for them.
  • The col-span-2 exception on the last crumb is the only asymmetry in the markup, and it is visible where it applies rather than hidden in an [aria-current] rule.
  • UI change from the CSS original: the trail is width-capped at 520px so the wrap — the entire point of the demo — actually happens on a wide screen. The original only demonstrated its own feature on a narrow viewport.
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 Multi-Line Aligned Breadcrumb Layout with CSS Subgrid
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-multi-line-aligned-breadcrumb-css-subgrid/

A trail whose icon, label and separator stay in perfect vertical alignment even when it wraps over several lines &mdash; each crumb inherits the parent's column tracks with subgrid. The port keeps both track declarations arbitrary, because a track list is not a design-scale value.
## HTML
```html
<section class="tbc-24 w-full min-h-svh grid place-items-center bg-tbc24-bg font-tbc24-sans px-7 py-7">
  <nav aria-label="Breadcrumb" class="max-w-[520px]">
    <ol class="grid justify-start items-center gap-x-2.25 gap-y-2.5 list-none m-0 p-0 [grid-template-columns:repeat(3,auto)]">
      <li class="grid items-center gap-2.25 col-span-3 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><a href="#" class="px-1 py-0.75 rounded-md text-sm font-semibold text-tbc24-link no-underline transition-colors duration-150 hover:text-tbc24-linkhover hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">Home</a><span aria-hidden="true" class="justify-self-center text-[15px] text-tbc24-sep">&rsaquo;</span></li>
      <li class="grid items-center gap-2.25 col-span-3 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg><a href="#" class="px-1 py-0.75 rounded-md text-sm font-semibold text-tbc24-link no-underline transition-colors duration-150 hover:text-tbc24-linkhover hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">Documentation</a><span aria-hidden="true" class="justify-self-center text-[15px] text-tbc24-sep">&rsaquo;</span></li>
      <li class="grid items-center gap-2.25 col-span-3 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><path d="M4 6h16M4 12h16M4 18h10"/></svg><a href="#" class="px-1 py-0.75 rounded-md text-sm font-semibold text-tbc24-link no-underline transition-colors duration-150 hover:text-tbc24-linkhover hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">CSS Layout Techniques</a><span aria-hidden="true" class="justify-self-center text-[15px] text-tbc24-sep">&rsaquo;</span></li>
      <li aria-current="page" class="grid items-center gap-2.25 col-span-2 [grid-template-columns:subgrid]"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.5 h-4.5 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round] text-tbc24-icon"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/></svg><a href="#" aria-current="page" class="px-1 py-0.75 rounded-md text-sm font-bold text-tbc24-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc24-acc focus-visible:outline-offset-2">Subgrid Alignment Guide</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc24-bg: #f4f7f8;
  --color-tbc24-bg: oklch(0.97 0.006 200);
  --color-tbc24-icon: #5f8894;
  --color-tbc24-icon: oklch(0.55 0.06 200);
  --color-tbc24-link: #3d6b80;
  --color-tbc24-link: oklch(0.45 0.08 210);
  --color-tbc24-linkhover: #2b5a75;
  --color-tbc24-linkhover: oklch(0.38 0.13 215);
  --color-tbc24-strong: #2b3339;
  --color-tbc24-strong: oklch(0.3 0.02 210);
  --color-tbc24-sep: #a9bcc2;
  --color-tbc24-sep: oklch(0.72 0.03 200);
  --color-tbc24-acc: #1b6f95;
  --color-tbc24-acc: oklch(0.5 0.15 215);
  --font-tbc24-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

Subgrid is what makes wrapped trails readable. With plain flex, a wrapped crumb starts wherever the previous one ended, so icons stagger down the rows. subgrid hands each crumb the parent's three tracks, so every icon, label and chevron lands in the same column on every line — a table's alignment without a table's semantics.

The separator is a real element here, not a pseudo. It needs to occupy a grid track, and pseudo-elements of a subgrid item participate awkwardly. It carries aria-hidden="true", so the announcement is unchanged.

Span arithmetic is the only trick: three tracks per crumb, two for the last one, which is why the current crumb carries col-span-2.

Make it yours

  • Column gap: gap-x-2.25; row gap gap-y-2.5 controls how wrapped lines breathe.
  • Add a fourth track (badge, count) by bumping the list to repeat(4,auto) and each crumb to col-span-4.
  • Icon set: any 24×24 stroke icons; the track width follows the widest one automatically.

Gotchas — read before shipping

  • subgrid inherits tracks only on the axis you name. [grid-template-columns:subgrid] alone leaves rows independent, which is what you want here.
  • Every crumb must span the same number of tracks or the columns shear — hence the explicit col-span-* on the exception.
  • Firefox shipped subgrid first and Chrome late (117); on older Chrome the trail falls back to a plain three-column grid, which is legible but unaligned when wrapped.

Browser support

ChromeSafariFirefoxEdge
117+16.4+128+117+

subgrid is the gate (Chrome 117, Safari 16, Firefox 71). Without it the crumbs render as ordinary grid items — readable, just not column-aligned across wrapped rows.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →