39 Tailwind CSS Breadcrumbs
11 / 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 Full-Width Block-Style Segmented Breadcrumb Bar

An edge-to-edge banner where each hierarchy step is a full-height coloured block, segments meeting flush with a bevel hairline and a tonal ramp encoding depth. The current step right-fills and takes the accent. On narrow screens the row becomes a stack — one max-sm: run instead of a media query.

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-11 w-full min-h-svh grid place-items-center bg-tbc11-bg font-tbc11-sans">
  <nav aria-label="Breadcrumb" class="w-full">
    <ol class="flex w-full list-none m-0 p-0 max-sm:flex-col">
      <li class="flex"><a href="#" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-step1 shadow-[inset_-1px_0_0_oklch(1_0_0/0.18),inset_1px_0_0_oklch(0_0_0/0.12)] transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-[inset_0_-1px_0_oklch(0_0_0/0.15)] motion-reduce:transition-none">Home</a></li>
      <li class="flex"><a href="#" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-step2 shadow-[inset_-1px_0_0_oklch(1_0_0/0.18),inset_1px_0_0_oklch(0_0_0/0.12)] transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-[inset_0_-1px_0_oklch(0_0_0/0.15)] motion-reduce:transition-none">Region</a></li>
      <li class="flex"><a href="#" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-step3 shadow-[inset_-1px_0_0_oklch(1_0_0/0.18),inset_1px_0_0_oklch(0_0_0/0.12)] transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-[inset_0_-1px_0_oklch(0_0_0/0.15)] motion-reduce:transition-none">Country</a></li>
      <li class="flex flex-1 max-sm:flex-none"><a href="#" aria-current="page" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-current shadow-[inset_1px_0_0_oklch(0_0_0/0.12)] focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-none">City Guide</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc11-bg: #f2f3f6;
  --color-tbc11-bg: oklch(0.96 0.005 250);
  --color-tbc11-step1: #414a63;
  --color-tbc11-step1: oklch(0.42 0.05 250);
  --color-tbc11-step2: #4a5677;
  --color-tbc11-step2: oklch(0.47 0.07 250);
  --color-tbc11-step3: #52628c;
  --color-tbc11-step3: oklch(0.52 0.09 250);
  --color-tbc11-current: #4f6bd6;
  --color-tbc11-current: oklch(0.55 0.17 255);
  --font-tbc11-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-11 {
  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-tbc11-bg: #f2f3f6;
  --color-tbc11-bg: oklch(0.96 0.005 250);
  --color-tbc11-step1: #414a63;
  --color-tbc11-step1: oklch(0.42 0.05 250);
  --color-tbc11-step2: #4a5677;
  --color-tbc11-step2: oklch(0.47 0.07 250);
  --color-tbc11-step3: #52628c;
  --color-tbc11-step3: oklch(0.52 0.09 250);
  --color-tbc11-current: #4f6bd6;
  --color-tbc11-current: oklch(0.55 0.17 255);
  --font-tbc11-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

  • Four nth-child tint rules become four bg-* utilities. This is the port being longer and still better: the ramp is now visible in the markup in trail order, and a fifth level is a copied line rather than a new selector.
  • The @media (max-width:560px) stack becomes max-sm: on the two elements it affects — the list's direction and the blocks' bevel axis.
  • UI change from the CSS original: the accent step was darkened to oklch(0.55 0.17 255) so white uppercase text clears 4.5:1 on every segment, and the current block keeps flex-1 only above the stack breakpoint.
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 Full-Width Block-Style Segmented Breadcrumb Bar
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-full-width-block-segmented-breadcrumb-bar/

An edge-to-edge banner where each hierarchy step is a full-height coloured block, segments meeting flush with a bevel hairline and a tonal ramp encoding depth. The current step right-fills and takes the accent. On narrow screens the row becomes a stack &mdash; one max-sm: run instead of a media query.
## HTML
```html
<section class="tbc-11 w-full min-h-svh grid place-items-center bg-tbc11-bg font-tbc11-sans">
  <nav aria-label="Breadcrumb" class="w-full">
    <ol class="flex w-full list-none m-0 p-0 max-sm:flex-col">
      <li class="flex"><a href="#" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-step1 shadow-[inset_-1px_0_0_oklch(1_0_0/0.18),inset_1px_0_0_oklch(0_0_0/0.12)] transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-[inset_0_-1px_0_oklch(0_0_0/0.15)] motion-reduce:transition-none">Home</a></li>
      <li class="flex"><a href="#" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-step2 shadow-[inset_-1px_0_0_oklch(1_0_0/0.18),inset_1px_0_0_oklch(0_0_0/0.12)] transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-[inset_0_-1px_0_oklch(0_0_0/0.15)] motion-reduce:transition-none">Region</a></li>
      <li class="flex"><a href="#" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-step3 shadow-[inset_-1px_0_0_oklch(1_0_0/0.18),inset_1px_0_0_oklch(0_0_0/0.12)] transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-[inset_0_-1px_0_oklch(0_0_0/0.15)] motion-reduce:transition-none">Country</a></li>
      <li class="flex flex-1 max-sm:flex-none"><a href="#" aria-current="page" class="flex items-center w-full h-13 px-5.5 text-[13px] font-bold tracking-[0.02em] uppercase text-white no-underline bg-tbc11-current shadow-[inset_1px_0_0_oklch(0_0_0/0.12)] focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_white] max-sm:shadow-none">City Guide</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc11-bg: #f2f3f6;
  --color-tbc11-bg: oklch(0.96 0.005 250);
  --color-tbc11-step1: #414a63;
  --color-tbc11-step1: oklch(0.42 0.05 250);
  --color-tbc11-step2: #4a5677;
  --color-tbc11-step2: oklch(0.47 0.07 250);
  --color-tbc11-step3: #52628c;
  --color-tbc11-step3: oklch(0.52 0.09 250);
  --color-tbc11-current: #4f6bd6;
  --color-tbc11-current: oklch(0.55 0.17 255);
  --font-tbc11-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

The ramp moves into the markup. The CSS version wrote li:nth-child(1) through li:last-child to tint each segment. Tailwind has nth-* variants, but they take static values and give nothing back here — so each block simply carries its own bg-tbc11-step1. Reordering the trail now means reordering markup, which is where the hierarchy actually lives.

The bevel is two inset shadows. A white hairline on the trailing edge and a dark one on the leading edge make adjacent blocks read as bevelled rather than merely adjacent. Under max-sm: the same pair rotates to the block's bottom edge.

Focus is an inset ring. These blocks touch, so an outline would be clipped by the neighbour. focus-visible:shadow-[inset_0_0_0_3px_white] draws the indicator inside the segment instead — the same trick the isometric demo needs for a different reason.

Make it yours

  • Ramp: the four --color-tbc11-step* tokens. Keep about 0.05 lightness between steps or the hierarchy stops reading.
  • Track mode: flex-1 on the last block right-fills; put flex-1 on every block for equal widths.
  • Height: h-13 on the blocks; the uppercase 13px label is tuned to it.

Gotchas — read before shipping

  • White uppercase 13px on the lightest ramp step is the contrast risk. The tokens here sit at or below 0.6 lightness for that reason — do not lighten the ramp without re-checking.
  • outline is unusable on flush segments; the inset-ring focus style is not a preference, it is the only visible option.
  • Uppercase plus letter-spacing hurts long labels. Truncate with truncate rather than shrinking the type.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Flexbox, inset shadows and filter are universally supported; the floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

flexboxtw ↗transitionstw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →