39 Tailwind CSS Breadcrumbs
21 / 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 Editorial Breadcrumb with Animated SVG Wave Underline

Warm paper, italic serif crumbs, and a signature flourish: an inline SVG wave draws itself under each crumb on hover or focus by tweening stroke-dashoffset. Tailwind has no dash utilities, so the port keeps two arbitrary properties on the path and everything else moves inline.

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-21 w-full min-h-svh grid place-items-center px-6 py-12 font-tbc21-serif bg-tbc21-paper dark:bg-tbc21-dpaper text-tbc21-ink dark:text-tbc21-dink">
  <article class="w-full max-w-[62ch] flex flex-col gap-5">
    <nav aria-label="Breadcrumb" class="text-[15px]/[1.4]">
      <ol class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 list-none m-0 p-0">
        <li class="inline-flex items-center min-h-11"><a href="#" class="group relative inline-flex items-center min-h-11 px-0.5 py-2.5 rounded-sm italic tracking-[0.005em] text-tbc21-ink dark:text-tbc21-dink no-underline transition-colors duration-200 hover:text-tbc21-strong dark:hover:text-tbc21-dstrong focus-visible:text-tbc21-strong focus-visible:outline-2 focus-visible:outline-tbc21-acc focus-visible:outline-offset-3"><span class="relative inline-block">Home<svg aria-hidden="true" viewBox="0 0 60 6" preserveAspectRatio="none" class="absolute inset-x-0 bottom-1.5 w-full h-1.5 overflow-visible pointer-events-none text-tbc21-acc dark:text-tbc21-dacc"><path d="M0 3 Q 15 0, 30 3 T 60 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" pathLength="100" vector-effect="non-scaling-stroke" class="opacity-0 [stroke-dasharray:100] [stroke-dashoffset:100] transition-[stroke-dashoffset,opacity] duration-450 group-hover:opacity-100 group-hover:[stroke-dashoffset:0] group-focus-visible:opacity-100 group-focus-visible:[stroke-dashoffset:0] motion-reduce:[stroke-dasharray:none] motion-reduce:[stroke-dashoffset:0] motion-reduce:duration-150"/></svg></span></a></li>
        <li class="inline-flex items-center min-h-11 before:content-['\00B7'] before:mr-2 before:ml-1 before:text-[1.05em] before:text-tbc21-sep"><a href="#" class="group relative inline-flex items-center min-h-11 px-0.5 py-2.5 rounded-sm italic tracking-[0.005em] text-tbc21-ink dark:text-tbc21-dink no-underline transition-colors duration-200 hover:text-tbc21-strong dark:hover:text-tbc21-dstrong focus-visible:text-tbc21-strong focus-visible:outline-2 focus-visible:outline-tbc21-acc focus-visible:outline-offset-3"><span class="relative inline-block">Style<svg aria-hidden="true" viewBox="0 0 60 6" preserveAspectRatio="none" class="absolute inset-x-0 bottom-1.5 w-full h-1.5 overflow-visible pointer-events-none text-tbc21-acc dark:text-tbc21-dacc"><path d="M0 3 Q 15 0, 30 3 T 60 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" pathLength="100" vector-effect="non-scaling-stroke" class="opacity-0 [stroke-dasharray:100] [stroke-dashoffset:100] transition-[stroke-dashoffset,opacity] duration-450 group-hover:opacity-100 group-hover:[stroke-dashoffset:0] group-focus-visible:opacity-100 group-focus-visible:[stroke-dashoffset:0] motion-reduce:[stroke-dasharray:none] motion-reduce:[stroke-dashoffset:0] motion-reduce:duration-150"/></svg></span></a></li>
        <li class="inline-flex items-center min-h-11 before:content-['\00B7'] before:mr-2 before:ml-1 before:text-[1.05em] before:text-tbc21-sep"><a href="#" class="group relative inline-flex items-center min-h-11 px-0.5 py-2.5 rounded-sm italic tracking-[0.005em] text-tbc21-ink dark:text-tbc21-dink no-underline transition-colors duration-200 hover:text-tbc21-strong dark:hover:text-tbc21-dstrong focus-visible:text-tbc21-strong focus-visible:outline-2 focus-visible:outline-tbc21-acc focus-visible:outline-offset-3"><span class="relative inline-block">Fashion<svg aria-hidden="true" viewBox="0 0 60 6" preserveAspectRatio="none" class="absolute inset-x-0 bottom-1.5 w-full h-1.5 overflow-visible pointer-events-none text-tbc21-acc dark:text-tbc21-dacc"><path d="M0 3 Q 15 0, 30 3 T 60 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" pathLength="100" vector-effect="non-scaling-stroke" class="opacity-0 [stroke-dasharray:100] [stroke-dashoffset:100] transition-[stroke-dashoffset,opacity] duration-450 group-hover:opacity-100 group-hover:[stroke-dashoffset:0] group-focus-visible:opacity-100 group-focus-visible:[stroke-dashoffset:0] motion-reduce:[stroke-dasharray:none] motion-reduce:[stroke-dashoffset:0] motion-reduce:duration-150"/></svg></span></a></li>
        <li aria-current="page" class="inline-flex items-center min-h-11 before:content-['\00B7'] before:mr-2 before:ml-1 before:text-[1.05em] before:text-tbc21-sep"><span class="inline-flex items-center min-h-11 px-0.5 py-2.5 not-italic font-semibold cursor-default text-tbc21-strong dark:text-tbc21-dstrong">The Return of Tailored Denim</span></li>
      </ol>
    </nav>
    <h1 class="m-0 mt-2 text-[clamp(1.75rem,4vw,2.4rem)]/[1.15] font-semibold tracking-[-0.01em] text-tbc21-strong dark:text-tbc21-dstrong">The Return of Tailored Denim</h1>
    <p class="m-0 max-w-[48ch] text-base/[1.55] italic text-tbc21-ink dark:text-tbc21-dink">A quiet revival of pressed seams and structured silhouettes, filed under Style / Fashion.</p>
  </article>
</section>
@import "tailwindcss";

@custom-variant dark (@media (prefers-color-scheme: dark));

@theme {
  --color-tbc21-paper: #f7f3ea;
  --color-tbc21-paper: oklch(0.97 0.01 85);
  --color-tbc21-ink: #6b6459;
  --color-tbc21-ink: oklch(0.42 0.02 60);
  --color-tbc21-strong: #37322c;
  --color-tbc21-strong: oklch(0.22 0.02 60);
  --color-tbc21-sep: #9b948a;
  --color-tbc21-sep: oklch(0.62 0.02 60);
  --color-tbc21-acc: #a85a34;
  --color-tbc21-acc: oklch(0.55 0.14 30);
  --color-tbc21-dpaper: #2b2620;
  --color-tbc21-dpaper: oklch(0.19 0.01 70);
  --color-tbc21-dink: #c4bdaf;
  --color-tbc21-dink: oklch(0.74 0.02 80);
  --color-tbc21-dstrong: #f1ece0;
  --color-tbc21-dstrong: oklch(0.93 0.02 85);
  --color-tbc21-dacc: #e0a866;
  --color-tbc21-dacc: oklch(0.78 0.14 60);
  --font-tbc21-serif: 'Fraunces', Charter, 'Iowan Old Style', Georgia, serif;
}

.tbc-21 {
  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";

@custom-variant dark (@media (prefers-color-scheme: dark));

@theme {
  --color-tbc21-paper: #f7f3ea;
  --color-tbc21-paper: oklch(0.97 0.01 85);
  --color-tbc21-ink: #6b6459;
  --color-tbc21-ink: oklch(0.42 0.02 60);
  --color-tbc21-strong: #37322c;
  --color-tbc21-strong: oklch(0.22 0.02 60);
  --color-tbc21-sep: #9b948a;
  --color-tbc21-sep: oklch(0.62 0.02 60);
  --color-tbc21-acc: #a85a34;
  --color-tbc21-acc: oklch(0.55 0.14 30);
  --color-tbc21-dpaper: #2b2620;
  --color-tbc21-dpaper: oklch(0.19 0.01 70);
  --color-tbc21-dink: #c4bdaf;
  --color-tbc21-dink: oklch(0.74 0.02 80);
  --color-tbc21-dstrong: #f1ece0;
  --color-tbc21-dstrong: oklch(0.93 0.02 85);
  --color-tbc21-dacc: #e0a866;
  --color-tbc21-dacc: oklch(0.78 0.14 60);
  --font-tbc21-serif: 'Fraunces', Charter, 'Iowan Old Style', Georgia, serif;
}

.tbc-21 {
  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=Fraunces:ital,wght@0,400;0,600;1,400&display=swap">

What changed in the port

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

  • Three rules (.wave path, .link:hover .wave path, .link:focus-visible .wave path) become one class list on the path with group-hover: and group-focus-visible: twins, so the draw's resting and drawn states are readable together.
  • Dash properties stay arbitrary and should: a dash array is geometry, not a design token, and Tailwind is right to ship no scale for it.
  • UI change from the CSS original: the current crumb is no longer a link-shaped span with a hidden wave — it is plainly non-interactive (not-italic font-semibold cursor-default), so the trail's end reads as a position rather than a dead link.
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 Editorial Breadcrumb with Animated SVG Wave Underline
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-editorial-breadcrumb-animated-svg-wave-underline/

Warm paper, italic serif crumbs, and a signature flourish: an inline SVG wave draws itself under each crumb on hover or focus by tweening stroke-dashoffset. Tailwind has no dash utilities, so the port keeps two arbitrary properties on the path and everything else moves inline.
## HTML
```html
<section class="tbc-21 w-full min-h-svh grid place-items-center px-6 py-12 font-tbc21-serif bg-tbc21-paper dark:bg-tbc21-dpaper text-tbc21-ink dark:text-tbc21-dink">
  <article class="w-full max-w-[62ch] flex flex-col gap-5">
    <nav aria-label="Breadcrumb" class="text-[15px]/[1.4]">
      <ol class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 list-none m-0 p-0">
        <li class="inline-flex items-center min-h-11"><a href="#" class="group relative inline-flex items-center min-h-11 px-0.5 py-2.5 rounded-sm italic tracking-[0.005em] text-tbc21-ink dark:text-tbc21-dink no-underline transition-colors duration-200 hover:text-tbc21-strong dark:hover:text-tbc21-dstrong focus-visible:text-tbc21-strong focus-visible:outline-2 focus-visible:outline-tbc21-acc focus-visible:outline-offset-3"><span class="relative inline-block">Home<svg aria-hidden="true" viewBox="0 0 60 6" preserveAspectRatio="none" class="absolute inset-x-0 bottom-1.5 w-full h-1.5 overflow-visible pointer-events-none text-tbc21-acc dark:text-tbc21-dacc"><path d="M0 3 Q 15 0, 30 3 T 60 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" pathLength="100" vector-effect="non-scaling-stroke" class="opacity-0 [stroke-dasharray:100] [stroke-dashoffset:100] transition-[stroke-dashoffset,opacity] duration-450 group-hover:opacity-100 group-hover:[stroke-dashoffset:0] group-focus-visible:opacity-100 group-focus-visible:[stroke-dashoffset:0] motion-reduce:[stroke-dasharray:none] motion-reduce:[stroke-dashoffset:0] motion-reduce:duration-150"/></svg></span></a></li>
        <li class="inline-flex items-center min-h-11 before:content-['\00B7'] before:mr-2 before:ml-1 before:text-[1.05em] before:text-tbc21-sep"><a href="#" class="group relative inline-flex items-center min-h-11 px-0.5 py-2.5 rounded-sm italic tracking-[0.005em] text-tbc21-ink dark:text-tbc21-dink no-underline transition-colors duration-200 hover:text-tbc21-strong dark:hover:text-tbc21-dstrong focus-visible:text-tbc21-strong focus-visible:outline-2 focus-visible:outline-tbc21-acc focus-visible:outline-offset-3"><span class="relative inline-block">Style<svg aria-hidden="true" viewBox="0 0 60 6" preserveAspectRatio="none" class="absolute inset-x-0 bottom-1.5 w-full h-1.5 overflow-visible pointer-events-none text-tbc21-acc dark:text-tbc21-dacc"><path d="M0 3 Q 15 0, 30 3 T 60 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" pathLength="100" vector-effect="non-scaling-stroke" class="opacity-0 [stroke-dasharray:100] [stroke-dashoffset:100] transition-[stroke-dashoffset,opacity] duration-450 group-hover:opacity-100 group-hover:[stroke-dashoffset:0] group-focus-visible:opacity-100 group-focus-visible:[stroke-dashoffset:0] motion-reduce:[stroke-dasharray:none] motion-reduce:[stroke-dashoffset:0] motion-reduce:duration-150"/></svg></span></a></li>
        <li class="inline-flex items-center min-h-11 before:content-['\00B7'] before:mr-2 before:ml-1 before:text-[1.05em] before:text-tbc21-sep"><a href="#" class="group relative inline-flex items-center min-h-11 px-0.5 py-2.5 rounded-sm italic tracking-[0.005em] text-tbc21-ink dark:text-tbc21-dink no-underline transition-colors duration-200 hover:text-tbc21-strong dark:hover:text-tbc21-dstrong focus-visible:text-tbc21-strong focus-visible:outline-2 focus-visible:outline-tbc21-acc focus-visible:outline-offset-3"><span class="relative inline-block">Fashion<svg aria-hidden="true" viewBox="0 0 60 6" preserveAspectRatio="none" class="absolute inset-x-0 bottom-1.5 w-full h-1.5 overflow-visible pointer-events-none text-tbc21-acc dark:text-tbc21-dacc"><path d="M0 3 Q 15 0, 30 3 T 60 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" pathLength="100" vector-effect="non-scaling-stroke" class="opacity-0 [stroke-dasharray:100] [stroke-dashoffset:100] transition-[stroke-dashoffset,opacity] duration-450 group-hover:opacity-100 group-hover:[stroke-dashoffset:0] group-focus-visible:opacity-100 group-focus-visible:[stroke-dashoffset:0] motion-reduce:[stroke-dasharray:none] motion-reduce:[stroke-dashoffset:0] motion-reduce:duration-150"/></svg></span></a></li>
        <li aria-current="page" class="inline-flex items-center min-h-11 before:content-['\00B7'] before:mr-2 before:ml-1 before:text-[1.05em] before:text-tbc21-sep"><span class="inline-flex items-center min-h-11 px-0.5 py-2.5 not-italic font-semibold cursor-default text-tbc21-strong dark:text-tbc21-dstrong">The Return of Tailored Denim</span></li>
      </ol>
    </nav>
    <h1 class="m-0 mt-2 text-[clamp(1.75rem,4vw,2.4rem)]/[1.15] font-semibold tracking-[-0.01em] text-tbc21-strong dark:text-tbc21-dstrong">The Return of Tailored Denim</h1>
    <p class="m-0 max-w-[48ch] text-base/[1.55] italic text-tbc21-ink dark:text-tbc21-dink">A quiet revival of pressed seams and structured silhouettes, filed under Style / Fashion.</p>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@custom-variant dark (@media (prefers-color-scheme: dark));

@theme {
  --color-tbc21-paper: #f7f3ea;
  --color-tbc21-paper: oklch(0.97 0.01 85);
  --color-tbc21-ink: #6b6459;
  --color-tbc21-ink: oklch(0.42 0.02 60);
  --color-tbc21-strong: #37322c;
  --color-tbc21-strong: oklch(0.22 0.02 60);
  --color-tbc21-sep: #9b948a;
  --color-tbc21-sep: oklch(0.62 0.02 60);
  --color-tbc21-acc: #a85a34;
  --color-tbc21-acc: oklch(0.55 0.14 30);
  --color-tbc21-dpaper: #2b2620;
  --color-tbc21-dpaper: oklch(0.19 0.01 70);
  --color-tbc21-dink: #c4bdaf;
  --color-tbc21-dink: oklch(0.74 0.02 80);
  --color-tbc21-dstrong: #f1ece0;
  --color-tbc21-dstrong: oklch(0.93 0.02 85);
  --color-tbc21-dacc: #e0a866;
  --color-tbc21-dacc: oklch(0.78 0.14 60);
  --font-tbc21-serif: 'Fraunces', Charter, 'Iowan Old Style', Georgia, serif;
}

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

How this works

The draw is a dash offset. pathLength="100" on the path normalises its length, so a dasharray of 100 and an offset of 100 hide it exactly. Tweening the offset to 0 draws it left to right. Tailwind ships no stroke-dash* utilities — correct, they are not design-scale values — so these stay arbitrary.

Hover state belongs to the link, motion to the path. The link is the group; the path carries the states. That split is what lets group-focus-visible: exist at all, and it is why the flourish is not mouse-only.

Dark mode is a paper swap. Four dark: tokens turn cream paper into warm dark, with the accent shifting up in lightness so the drawn wave stays visible on both.

Make it yours

  • Wave shape: the path's Q/T control points. A flatter curve reads as a pen rule, a deeper one as a flourish.
  • Draw speed: duration-450 on the path; beyond about 600ms it stops feeling responsive.
  • Type: the serif stack in --font-tbc21-serif and the italic utility are the whole editorial voice.

Gotchas — read before shipping

  • The SVG needs overflow-visible and pointer-events-none, or the stroke clips at the viewBox edge and the wave eats hover events.
  • vector-effect="non-scaling-stroke" keeps the 1.4px stroke from thickening when the SVG stretches to label width.
  • The current crumb is a <span>, not a link, and its wave is removed — a hover flourish on a non-interactive element is a false affordance.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

stroke-dashoffset transitions and pathLength are universally supported; the floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →