39 Tailwind CSS Breadcrumbs
13 / 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 Seamless Arrow-Cutout Breadcrumb Trail with clip-path

The interlocking-chevron trail: every crumb is a clip-path polygon with a notch cut from its leading edge and a point on its trailing edge, overlapped by a negative margin so the shapes mesh. First and last crumbs carry their own flat-edged polygons — three shapes, stated on the three elements that use them.

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-13 w-full min-h-svh grid place-items-center bg-tbc13-page font-tbc13-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex list-none m-0 p-0">
      <li class="flex"><a href="#" class="relative flex items-center h-11 pl-4 pr-6.5 text-[13px] font-semibold text-white no-underline bg-tbc13-step1 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_50%,calc(100%-14px)_100%,0_100%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4 motion-reduce:transition-none">Home</a></li>
      <li class="flex -ms-[14px]"><a href="#" class="relative flex items-center h-11 px-6.5 text-[13px] font-semibold text-white no-underline bg-tbc13-step2 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_50%,calc(100%-14px)_100%,0_100%,14px_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4 motion-reduce:transition-none">Catalog</a></li>
      <li class="flex -ms-[14px]"><a href="#" class="relative flex items-center h-11 px-6.5 text-[13px] font-semibold text-white no-underline bg-tbc13-step3 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_50%,calc(100%-14px)_100%,0_100%,14px_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4 motion-reduce:transition-none">Tools</a></li>
      <li class="flex -ms-[14px]"><a href="#" aria-current="page" class="relative flex items-center h-11 pl-6.5 pr-4 text-[13px] font-bold text-white no-underline bg-tbc13-current [clip-path:polygon(0_0,100%_0,100%_100%,0_100%,14px_50%)] focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4">Power Drills</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc13-page: #f4f2ec;
  --color-tbc13-page: oklch(0.96 0.01 90);
  --color-tbc13-step1: #8b8778;
  --color-tbc13-step1: oklch(0.58 0.03 90);
  --color-tbc13-step2: #7d7460;
  --color-tbc13-step2: oklch(0.52 0.05 60);
  --color-tbc13-step3: #7a6a55;
  --color-tbc13-step3: oklch(0.5 0.07 40);
  --color-tbc13-current: #c4553c;
  --color-tbc13-current: oklch(0.58 0.18 25);
  --color-tbc13-ring: #4a3a2e;
  --color-tbc13-ring: oklch(0.3 0.05 40);
  --font-tbc13-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-13 {
  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-tbc13-page: #f4f2ec;
  --color-tbc13-page: oklch(0.96 0.01 90);
  --color-tbc13-step1: #8b8778;
  --color-tbc13-step1: oklch(0.58 0.03 90);
  --color-tbc13-step2: #7d7460;
  --color-tbc13-step2: oklch(0.52 0.05 60);
  --color-tbc13-step3: #7a6a55;
  --color-tbc13-step3: oklch(0.5 0.07 40);
  --color-tbc13-current: #c4553c;
  --color-tbc13-current: oklch(0.58 0.18 25);
  --color-tbc13-ring: #4a3a2e;
  --color-tbc13-ring: oklch(0.3 0.05 40);
  --font-tbc13-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-13 {
  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 clip-path rules (base, first, last, only-child) collapse to three inline polygons. The only-child case is dropped: a one-crumb trail is not a trail, and carrying a rule for it was dead weight.
  • -ms-[14px] rather than -ml-[14px] is deliberate — logical properties are free in Tailwind and this shape only meshes if the overlap follows writing direction.
  • UI change from the CSS original: crumb height went from 44px of padding-driven box to an explicit h-11, and the current crumb darkened to clear AA with white bold text.
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 Seamless Arrow-Cutout Breadcrumb Trail with clip-path
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-seamless-arrow-cutout-breadcrumb-clip-path/

The interlocking-chevron trail: every crumb is a clip-path polygon with a notch cut from its leading edge and a point on its trailing edge, overlapped by a negative margin so the shapes mesh. First and last crumbs carry their own flat-edged polygons &mdash; three shapes, stated on the three elements that use them.
## HTML
```html
<section class="tbc-13 w-full min-h-svh grid place-items-center bg-tbc13-page font-tbc13-sans px-8 py-8">
  <nav aria-label="Breadcrumb">
    <ol class="flex list-none m-0 p-0">
      <li class="flex"><a href="#" class="relative flex items-center h-11 pl-4 pr-6.5 text-[13px] font-semibold text-white no-underline bg-tbc13-step1 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_50%,calc(100%-14px)_100%,0_100%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4 motion-reduce:transition-none">Home</a></li>
      <li class="flex -ms-[14px]"><a href="#" class="relative flex items-center h-11 px-6.5 text-[13px] font-semibold text-white no-underline bg-tbc13-step2 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_50%,calc(100%-14px)_100%,0_100%,14px_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4 motion-reduce:transition-none">Catalog</a></li>
      <li class="flex -ms-[14px]"><a href="#" class="relative flex items-center h-11 px-6.5 text-[13px] font-semibold text-white no-underline bg-tbc13-step3 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_50%,calc(100%-14px)_100%,0_100%,14px_50%)] transition-[filter] duration-200 hover:brightness-112 focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4 motion-reduce:transition-none">Tools</a></li>
      <li class="flex -ms-[14px]"><a href="#" aria-current="page" class="relative flex items-center h-11 pl-6.5 pr-4 text-[13px] font-bold text-white no-underline bg-tbc13-current [clip-path:polygon(0_0,100%_0,100%_100%,0_100%,14px_50%)] focus-visible:outline-3 focus-visible:outline-tbc13-ring focus-visible:outline-offset-4">Power Drills</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc13-page: #f4f2ec;
  --color-tbc13-page: oklch(0.96 0.01 90);
  --color-tbc13-step1: #8b8778;
  --color-tbc13-step1: oklch(0.58 0.03 90);
  --color-tbc13-step2: #7d7460;
  --color-tbc13-step2: oklch(0.52 0.05 60);
  --color-tbc13-step3: #7a6a55;
  --color-tbc13-step3: oklch(0.5 0.07 40);
  --color-tbc13-current: #c4553c;
  --color-tbc13-current: oklch(0.58 0.18 25);
  --color-tbc13-ring: #4a3a2e;
  --color-tbc13-ring: oklch(0.3 0.05 40);
  --font-tbc13-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

Three polygons, three elements. The CSS version wrote a base clip-path and then overrode it in :first-child and :last-child rules. In utilities each crumb simply carries the shape it needs, which makes the trail's geometry readable in trail order — and makes a five-step trail a copy-paste of the middle class list.

The overlap is a logical margin. -ms-[14px] pulls each crumb 14px into its predecessor, exactly the notch depth. Using the logical property rather than -ml-14 means the trail also meshes correctly in RTL.

Focus cannot live inside a clip. clip-path cuts the outline too, so the ring uses outline-offset-4 to sit clear of the shape. That is the one non-obvious constraint of this whole pattern.

Make it yours

  • Notch depth: the 14px inside the polygons and the matching -ms-[14px]. They must agree, or the shapes leave a gap.
  • Height: h-11 on the links keeps a 44px target; the polygon percentages follow automatically.
  • Ramp: the three --color-tbc13-step* tokens plus the accent for the current crumb.

Gotchas — read before shipping

  • Notch depth and negative margin are one number in two places — the single most common bug in this pattern. Keep them adjacent in the class list.
  • An outline drawn inside a clipped element is invisible; always offset it outward.
  • calc(100%-14px) inside an arbitrary value must be typed closed-up, with underscores for the spaces between polygon points.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Polygon clip-path has been Baseline since 2021; the floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →