39 Tailwind CSS Breadcrumbs
37 / 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 Circular Icon & Numbered Step Breadcrumbs

Stepper meets breadcrumb: every crumb leads with a circular badge holding an icon or an auto-incremented number, joined by short connector rules. The counter stays in CSS (it must), while the badge states, the connectors and the responsive icon-only mode are all 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-37 w-full min-h-svh grid place-items-center bg-tbc37-bg font-tbc37-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-4.5 list-none m-0 p-0 [counter-reset:tbc37step]">
      <li class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line first:before:hidden"><a href="#" class="inline-flex items-center gap-2.25 text-[13.5px] font-semibold text-tbc37-link no-underline transition-colors duration-150 hover:text-tbc37-linkhover focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-tint text-tbc37-acc group-aria-[current=page]:bg-tbc37-acc group-aria-[current=page]:text-white"><svg viewBox="0 0 24 24" class="w-3.75 h-3.75 fill-none stroke-current [stroke-width:1.9] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg></span>Home</a></li>
      <li class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line"><a href="#" class="inline-flex items-center gap-2.25 text-[13.5px] font-semibold text-tbc37-link no-underline transition-colors duration-150 hover:text-tbc37-linkhover focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="tbc37-num grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-tint text-tbc37-acc [counter-increment:tbc37step] group-aria-[current=page]:bg-tbc37-acc group-aria-[current=page]:text-white"></span>Account</a></li>
      <li class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line"><a href="#" class="inline-flex items-center gap-2.25 text-[13.5px] font-semibold text-tbc37-link no-underline transition-colors duration-150 hover:text-tbc37-linkhover focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="tbc37-num grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-tint text-tbc37-acc [counter-increment:tbc37step] group-aria-[current=page]:bg-tbc37-acc group-aria-[current=page]:text-white"></span>Profile</a></li>
      <li aria-current="page" class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line"><a href="#" aria-current="page" class="inline-flex items-center gap-2.25 text-[13.5px] font-bold text-tbc37-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="tbc37-num grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-acc text-white [counter-increment:tbc37step]"></span>Preferences</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc37-bg: #fbfbfd;
  --color-tbc37-bg: oklch(0.98 0.004 260);
  --color-tbc37-tint: #dfe2f6;
  --color-tbc37-tint: oklch(0.91 0.03 265);
  --color-tbc37-acc: #4a5ac4;
  --color-tbc37-acc: oklch(0.5 0.16 265);
  --color-tbc37-link: #61656f;
  --color-tbc37-link: oklch(0.46 0.03 260);
  --color-tbc37-linkhover: #3a3f8c;
  --color-tbc37-linkhover: oklch(0.36 0.13 265);
  --color-tbc37-strong: #33363f;
  --color-tbc37-strong: oklch(0.28 0.02 260);
  --color-tbc37-line: #d5d8e2;
  --color-tbc37-line: oklch(0.86 0.01 260);
  --font-tbc37-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-37 {
  width: 100%;
  min-height: 100svh;
}
/* content:counter() has no utility form. One rule, and the badges number themselves. */

.tbc-37 .tbc37-num::after {
  content: counter(tbc37step);
}
/* The compact mode restates the badge's own size, because the link's text-[0] would
   otherwise cascade into it. */

@media (max-width: 40rem) {
  .tbc-37 span[aria-hidden] {
    font-size: 0.75rem;
  }
}

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-tbc37-bg: #fbfbfd;
  --color-tbc37-bg: oklch(0.98 0.004 260);
  --color-tbc37-tint: #dfe2f6;
  --color-tbc37-tint: oklch(0.91 0.03 265);
  --color-tbc37-acc: #4a5ac4;
  --color-tbc37-acc: oklch(0.5 0.16 265);
  --color-tbc37-link: #61656f;
  --color-tbc37-link: oklch(0.46 0.03 260);
  --color-tbc37-linkhover: #3a3f8c;
  --color-tbc37-linkhover: oklch(0.36 0.13 265);
  --color-tbc37-strong: #33363f;
  --color-tbc37-strong: oklch(0.28 0.02 260);
  --color-tbc37-line: #d5d8e2;
  --color-tbc37-line: oklch(0.86 0.01 260);
  --font-tbc37-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-37 {
  width: 100%;
  min-height: 100svh;
}
/* content:counter() has no utility form. One rule, and the badges number themselves. */

.tbc-37 .tbc37-num::after {
  content: counter(tbc37step);
}
/* The compact mode restates the badge's own size, because the link's text-[0] would
   otherwise cascade into it. */

@media (max-width: 40rem) {
  .tbc-37 span[aria-hidden] {
    font-size: 0.75rem;
  }
}
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.

  • Two CSS rules survive the port and both are load-bearing: the counter's content, and the badge font-size restatement that the text-[0] compact mode requires. Everything else — badge tint, accent inversion, connectors — is a utility.
  • group-aria-[current=page]: on the badge means the accent inversion reads the same attribute the screen reader does, instead of a mirrored class.
  • UI change from the CSS original: the accent darkened for AA on the tinted badge, and the current crumb now carries aria-current on BOTH the <li> and the <a> so the badge inversion and the link weight can each read it locally.
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 Circular Icon & Numbered Step Breadcrumbs
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-circular-icon-numbered-step-breadcrumbs/

Stepper meets breadcrumb: every crumb leads with a circular badge holding an icon or an auto-incremented number, joined by short connector rules. The counter stays in CSS (it must), while the badge states, the connectors and the responsive icon-only mode are all utilities.
## HTML
```html
<section class="tbc-37 w-full min-h-svh grid place-items-center bg-tbc37-bg font-tbc37-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-4.5 list-none m-0 p-0 [counter-reset:tbc37step]">
      <li class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line first:before:hidden"><a href="#" class="inline-flex items-center gap-2.25 text-[13.5px] font-semibold text-tbc37-link no-underline transition-colors duration-150 hover:text-tbc37-linkhover focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-tint text-tbc37-acc group-aria-[current=page]:bg-tbc37-acc group-aria-[current=page]:text-white"><svg viewBox="0 0 24 24" class="w-3.75 h-3.75 fill-none stroke-current [stroke-width:1.9] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg></span>Home</a></li>
      <li class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line"><a href="#" class="inline-flex items-center gap-2.25 text-[13.5px] font-semibold text-tbc37-link no-underline transition-colors duration-150 hover:text-tbc37-linkhover focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="tbc37-num grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-tint text-tbc37-acc [counter-increment:tbc37step] group-aria-[current=page]:bg-tbc37-acc group-aria-[current=page]:text-white"></span>Account</a></li>
      <li class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line"><a href="#" class="inline-flex items-center gap-2.25 text-[13.5px] font-semibold text-tbc37-link no-underline transition-colors duration-150 hover:text-tbc37-linkhover focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="tbc37-num grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-tint text-tbc37-acc [counter-increment:tbc37step] group-aria-[current=page]:bg-tbc37-acc group-aria-[current=page]:text-white"></span>Profile</a></li>
      <li aria-current="page" class="group relative flex items-center before:content-[''] before:absolute before:-left-4.5 before:w-4.5 before:border-t-2 before:border-tbc37-line"><a href="#" aria-current="page" class="inline-flex items-center gap-2.25 text-[13.5px] font-bold text-tbc37-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc37-acc focus-visible:outline-offset-3 focus-visible:rounded-md max-sm:gap-0 max-sm:text-[0]"><span aria-hidden="true" class="tbc37-num grid place-items-center flex-none w-7 h-7 rounded-full text-xs font-bold bg-tbc37-acc text-white [counter-increment:tbc37step]"></span>Preferences</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc37-bg: #fbfbfd;
  --color-tbc37-bg: oklch(0.98 0.004 260);
  --color-tbc37-tint: #dfe2f6;
  --color-tbc37-tint: oklch(0.91 0.03 265);
  --color-tbc37-acc: #4a5ac4;
  --color-tbc37-acc: oklch(0.5 0.16 265);
  --color-tbc37-link: #61656f;
  --color-tbc37-link: oklch(0.46 0.03 260);
  --color-tbc37-linkhover: #3a3f8c;
  --color-tbc37-linkhover: oklch(0.36 0.13 265);
  --color-tbc37-strong: #33363f;
  --color-tbc37-strong: oklch(0.28 0.02 260);
  --color-tbc37-line: #d5d8e2;
  --color-tbc37-line: oklch(0.86 0.01 260);
  --font-tbc37-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-37 {
  width: 100%;
  min-height: 100svh;
}
/* content:counter() has no utility form. One rule, and the badges number themselves. */

.tbc-37 .tbc37-num::after {
  content: counter(tbc37step);
}
/* The compact mode restates the badge's own size, because the link's text-[0] would
   otherwise cascade into it. */

@media (max-width: 40rem) {
  .tbc-37 span[aria-hidden] {
    font-size: 0.75rem;
  }
}
```

How this works

Counters cannot be utilities, badges can. counter-increment lands as an arbitrary property on the badge, and the single content:counter(...) rule stays in the stylesheet. Everything else — tint, size, accent inversion — is a utility on the element.

Icon or number, same badge. The first crumb's badge holds an SVG; the rest hold counters. Same 28px circle, same tint, so the trail reads as one system.

The compact mode is honest about its cost. text-[0] hides labels below the breakpoint, leaving badges only — which is why the links keep full text in the DOM and the current step keeps aria-current: the screen-reader experience is unchanged at every width.

Make it yours

  • Badge: w-7 h-7 plus --color-tbc37-tint and --color-tbc37-acc.
  • Connector: before:-left-4.5 before:w-4.5, matched to the list gap.
  • Compact breakpoint: max-sm: → max-md: for long labels.

Gotchas — read before shipping

  • text-[0] is a visual trick, not a hiding technique — it works here only because the badge's font size is restated. Never use it to hide something a screen reader should skip.
  • Counter scope lives on the list; nesting two trails on one page without separate counter names makes the numbers continue across both.
  • Connector width and list gap are the same number in two places.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

CSS counters are universal; the floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗flexboxtw ↗transitionstw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →