39 Tailwind CSS Breadcrumbs
14 / 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 Compact Icon-Only Home Node Breadcrumb Bar

The space-saving convention: the first crumb is a house icon, with the word "Home" kept for screen readers by Tailwind's built-in sr-only. The port's whole argument is that the visually-hidden pattern — the thing developers most often get wrong by hand — is one correct utility here.

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-14 w-full min-h-svh grid place-items-center bg-tbc14-bg font-tbc14-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center list-none m-0 p-0">
      <li class="flex items-center"><a href="#" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-semibold text-tbc14-link no-underline transition-colors duration-200 hover:text-tbc14-acc hover:bg-[color-mix(in_oklab,var(--color-tbc14-acc)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2 motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.75 h-4.75 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><span class="sr-only">Home</span></a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc14-sep"><a href="#" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-semibold text-tbc14-link no-underline transition-colors duration-200 hover:text-tbc14-acc hover:bg-[color-mix(in_oklab,var(--color-tbc14-acc)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Help Center</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc14-sep"><a href="#" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-semibold text-tbc14-link no-underline transition-colors duration-200 hover:text-tbc14-acc hover:bg-[color-mix(in_oklab,var(--color-tbc14-acc)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Billing</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc14-sep"><a href="#" aria-current="page" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-bold text-tbc14-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2">Refunds</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc14-bg: #fafbfd;
  --color-tbc14-bg: oklch(0.98 0.004 235);
  --color-tbc14-link: #5c6b7d;
  --color-tbc14-link: oklch(0.46 0.05 235);
  --color-tbc14-strong: #343a41;
  --color-tbc14-strong: oklch(0.3 0.02 235);
  --color-tbc14-sep: #a9b0ba;
  --color-tbc14-sep: oklch(0.72 0.02 235);
  --color-tbc14-acc: #2f79b5;
  --color-tbc14-acc: oklch(0.55 0.14 235);
  --font-tbc14-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-14 {
  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-tbc14-bg: #fafbfd;
  --color-tbc14-bg: oklch(0.98 0.004 235);
  --color-tbc14-link: #5c6b7d;
  --color-tbc14-link: oklch(0.46 0.05 235);
  --color-tbc14-strong: #343a41;
  --color-tbc14-strong: oklch(0.3 0.02 235);
  --color-tbc14-sep: #a9b0ba;
  --color-tbc14-sep: oklch(0.72 0.02 235);
  --color-tbc14-acc: #2f79b5;
  --color-tbc14-acc: oklch(0.55 0.14 235);
  --font-tbc14-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

  • The hand-written .sr class (seven declarations) becomes sr-only. This is the smallest diff in the collection and the one with the highest chance of preventing a real bug.
  • Icon geometry moved onto the SVG as utilities (w-4.75 h-4.75 stroke-current), so a crumb copied into another project carries its own icon sizing.
  • UI change from the CSS original: hit targets went from 40px to min-w-11 min-h-11 (44px), which is the WCAG 2.5.8 minimum the original just missed.
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 Compact Icon-Only Home Node Breadcrumb Bar
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-compact-icon-only-home-node-breadcrumb-bar/

The space-saving convention: the first crumb is a house icon, with the word "Home" kept for screen readers by Tailwind's built-in sr-only. The port's whole argument is that the visually-hidden pattern &mdash; the thing developers most often get wrong by hand &mdash; is one correct utility here.
## HTML
```html
<section class="tbc-14 w-full min-h-svh grid place-items-center bg-tbc14-bg font-tbc14-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center list-none m-0 p-0">
      <li class="flex items-center"><a href="#" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-semibold text-tbc14-link no-underline transition-colors duration-200 hover:text-tbc14-acc hover:bg-[color-mix(in_oklab,var(--color-tbc14-acc)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2 motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="w-4.75 h-4.75 fill-none stroke-current [stroke-width:1.8] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><span class="sr-only">Home</span></a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc14-sep"><a href="#" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-semibold text-tbc14-link no-underline transition-colors duration-200 hover:text-tbc14-acc hover:bg-[color-mix(in_oklab,var(--color-tbc14-acc)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Help Center</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc14-sep"><a href="#" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-semibold text-tbc14-link no-underline transition-colors duration-200 hover:text-tbc14-acc hover:bg-[color-mix(in_oklab,var(--color-tbc14-acc)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2 motion-reduce:transition-none">Billing</a></li>
      <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc14-sep"><a href="#" aria-current="page" class="inline-flex items-center justify-center min-w-11 min-h-11 px-2.5 rounded-[9px] text-[13.5px] font-bold text-tbc14-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc14-acc focus-visible:outline-offset-2">Refunds</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc14-bg: #fafbfd;
  --color-tbc14-bg: oklch(0.98 0.004 235);
  --color-tbc14-link: #5c6b7d;
  --color-tbc14-link: oklch(0.46 0.05 235);
  --color-tbc14-strong: #343a41;
  --color-tbc14-strong: oklch(0.3 0.02 235);
  --color-tbc14-sep: #a9b0ba;
  --color-tbc14-sep: oklch(0.72 0.02 235);
  --color-tbc14-acc: #2f79b5;
  --color-tbc14-acc: oklch(0.55 0.14 235);
  --font-tbc14-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

The icon has a name, not a label. The link contains an aria-hidden SVG plus <span class="sr-only">Home</span>. Screen readers announce "Home, link"; sighted users see a house. An aria-label would work too, but text in the DOM survives translation tools, which an attribute often does not.

Why sr-only matters. Hand-rolled hiding usually reaches for display:none (removes it from the accessibility tree), width:0 (collapses focus) or text-indent (leaks in RTL). Tailwind's utility is the clip-path-plus-1px-box version, which is the one that works.

Everything else is a normal trail: chevron before: separators, aria-current on the last crumb, colour-mix hover.

Make it yours

  • Swap the house path for any 24×24 icon; the geometry is driven by w-4.75 h-4.75, not the path.
  • Add icons to the other crumbs and keep their text visible — the icon-only treatment is for Home, where the metaphor is unambiguous.
  • Accent: --color-tbc14-acc drives hover ink, hover tint and the focus ring.

Gotchas — read before shipping

  • Never use hidden on the label. It removes the accessible name entirely, leaving a link announced as "link".
  • Icon-only crumbs are only safe for Home. "Settings" or "Billing" as a bare glyph is a guessing game.
  • The SVG needs aria-hidden="true", or some screen readers announce the graphic in addition to the hidden text.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

sr-only compiles to universally supported declarations; color-mix() is the only modern gate and is v4's own floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

color-mix()tw ↗transitionstw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →