39 Tailwind CSS Breadcrumbs
23 / 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 Modern Arrow Breadcrumb Bar using clip-path Polygons

The interlocking-arrow bar with a tunable point: one --tbc23-depth property drives every polygon and every overlap, so the chevron angle is a one-line edit across a five-step trail. The list carries a drop-shadow filter, which is the only way to shadow a clipped shape.

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-23 w-full min-h-svh flex items-center justify-center bg-tbc23-bg font-tbc23-sans px-7 py-7 [--tbc23-depth:16px]">
  <nav aria-label="Breadcrumb">
    <ol class="flex list-none m-0 p-0 [filter:drop-shadow(0_2px_4px_oklch(0_0_0/0.12))]">
      <li class="flex"><a href="#" class="flex items-center h-10 pl-5 pr-4.5 text-[13.5px] font-semibold text-white no-underline bg-tbc23-step1 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Home</a></li>
      <li class="flex"><a href="#" class="flex items-center h-10 pl-6.5 pr-4.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-semibold text-white no-underline bg-tbc23-step2 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%,var(--tbc23-depth)_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Electronics</a></li>
      <li class="flex"><a href="#" class="flex items-center h-10 pl-6.5 pr-4.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-semibold text-white no-underline bg-tbc23-step3 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%,var(--tbc23-depth)_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Audio</a></li>
      <li class="flex"><a href="#" class="flex items-center h-10 pl-6.5 pr-4.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-semibold text-white no-underline bg-tbc23-step4 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%,var(--tbc23-depth)_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Headphones</a></li>
      <li class="flex"><a href="#" aria-current="page" class="flex items-center h-10 pl-6.5 pr-5.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-bold text-white no-underline cursor-default bg-tbc23-acc [clip-path:polygon(0_0,100%_0,100%_100%,0_100%,var(--tbc23-depth)_50%)] focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-ring)]">Wireless Over-Ear</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc23-bg: #f2f3f6;
  --color-tbc23-bg: oklch(0.96 0.005 260);
  --color-tbc23-step1: #8f929d;
  --color-tbc23-step1: oklch(0.6 0.02 260);
  --color-tbc23-step2: #82868f;
  --color-tbc23-step2: oklch(0.56 0.03 260);
  --color-tbc23-step3: #757985;
  --color-tbc23-step3: oklch(0.52 0.04 260);
  --color-tbc23-step4: #686d7d;
  --color-tbc23-step4: oklch(0.48 0.05 260);
  --color-tbc23-acc: #5a63cf;
  --color-tbc23-acc: oklch(0.55 0.17 265);
  --color-tbc23-ring: #2b2f66;
  --color-tbc23-ring: oklch(0.3 0.1 265);
  --font-tbc23-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-23 {
  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-tbc23-bg: #f2f3f6;
  --color-tbc23-bg: oklch(0.96 0.005 260);
  --color-tbc23-step1: #8f929d;
  --color-tbc23-step1: oklch(0.6 0.02 260);
  --color-tbc23-step2: #82868f;
  --color-tbc23-step2: oklch(0.56 0.03 260);
  --color-tbc23-step3: #757985;
  --color-tbc23-step3: oklch(0.52 0.04 260);
  --color-tbc23-step4: #686d7d;
  --color-tbc23-step4: oklch(0.48 0.05 260);
  --color-tbc23-acc: #5a63cf;
  --color-tbc23-acc: oklch(0.55 0.17 265);
  --color-tbc23-ring: #2b2f66;
  --color-tbc23-ring: oklch(0.3 0.1 265);
  --font-tbc23-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

  • Reading --tbc23-depth from inside arbitrary values is what makes this the tunable version of demo 13: one property, and the polygons plus the overlaps stay in sync by construction.
  • [filter:drop-shadow(...)] rather than a shadow-* utility is the non-obvious requirement of every clipped trail — box shadows draw the un-clipped rectangle.
  • UI change from the CSS original: the accent step darkened for AA with white bold text, and the current crumb's focus ring uses a darker inner accent so it stays visible against the accent fill itself.
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 Modern Arrow Breadcrumb Bar using clip-path Polygons
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-modern-arrow-breadcrumb-bar-clip-path-polygons/

The interlocking-arrow bar with a tunable point: one --tbc23-depth property drives every polygon and every overlap, so the chevron angle is a one-line edit across a five-step trail. The list carries a drop-shadow filter, which is the only way to shadow a clipped shape.
## HTML
```html
<section class="tbc-23 w-full min-h-svh flex items-center justify-center bg-tbc23-bg font-tbc23-sans px-7 py-7 [--tbc23-depth:16px]">
  <nav aria-label="Breadcrumb">
    <ol class="flex list-none m-0 p-0 [filter:drop-shadow(0_2px_4px_oklch(0_0_0/0.12))]">
      <li class="flex"><a href="#" class="flex items-center h-10 pl-5 pr-4.5 text-[13.5px] font-semibold text-white no-underline bg-tbc23-step1 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Home</a></li>
      <li class="flex"><a href="#" class="flex items-center h-10 pl-6.5 pr-4.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-semibold text-white no-underline bg-tbc23-step2 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%,var(--tbc23-depth)_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Electronics</a></li>
      <li class="flex"><a href="#" class="flex items-center h-10 pl-6.5 pr-4.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-semibold text-white no-underline bg-tbc23-step3 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%,var(--tbc23-depth)_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Audio</a></li>
      <li class="flex"><a href="#" class="flex items-center h-10 pl-6.5 pr-4.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-semibold text-white no-underline bg-tbc23-step4 [clip-path:polygon(0_0,calc(100%-var(--tbc23-depth))_0,100%_50%,calc(100%-var(--tbc23-depth))_100%,0_100%,var(--tbc23-depth)_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-acc)] motion-reduce:transition-none">Headphones</a></li>
      <li class="flex"><a href="#" aria-current="page" class="flex items-center h-10 pl-6.5 pr-5.5 -ms-[var(--tbc23-depth)] text-[13.5px] font-bold text-white no-underline cursor-default bg-tbc23-acc [clip-path:polygon(0_0,100%_0,100%_100%,0_100%,var(--tbc23-depth)_50%)] focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_2.5px_white,inset_0_0_0_4px_var(--color-tbc23-ring)]">Wireless Over-Ear</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc23-bg: #f2f3f6;
  --color-tbc23-bg: oklch(0.96 0.005 260);
  --color-tbc23-step1: #8f929d;
  --color-tbc23-step1: oklch(0.6 0.02 260);
  --color-tbc23-step2: #82868f;
  --color-tbc23-step2: oklch(0.56 0.03 260);
  --color-tbc23-step3: #757985;
  --color-tbc23-step3: oklch(0.52 0.04 260);
  --color-tbc23-step4: #686d7d;
  --color-tbc23-step4: oklch(0.48 0.05 260);
  --color-tbc23-acc: #5a63cf;
  --color-tbc23-acc: oklch(0.55 0.17 265);
  --color-tbc23-ring: #2b2f66;
  --color-tbc23-ring: oklch(0.3 0.1 265);
  --font-tbc23-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

One property, six references. Every crumb's polygon and its negative margin read --tbc23-depth, declared once on the section. Change 16px to 24px and the whole trail resharpens with no mismatch — the failure mode of demo 13's literal values.

Clipped shapes cannot be shadowed. A shadow-* utility paints the rectangular border box, which then gets clipped away. drop-shadow() follows the alpha of the rendered shape, so it goes on the list and shadows the whole chevron run at once.

Focus is two inset rings — white inside accent — visible on every step of the ramp, and unaffected by the clip because insets paint within the padding box.

Make it yours

  • Point angle: --tbc23-depth. Values above about 24px start eating the label's left padding.
  • Height: h-10 plus the ramp's four tokens.
  • For a wizard, add aria-current="step" and style with aria-[current=step]:.

Gotchas — read before shipping

  • The negative margin and the polygon depth must both read the same property, or the shapes gap.
  • drop-shadow on the list is cheap; on each crumb it would composite five separate layers.
  • Do not add overflow-hidden to the list — it clips the drop shadow to the border box and undoes the effect.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Polygon clip-path and drop-shadow() are Baseline; the floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →