39 Tailwind CSS Breadcrumbs
09 / 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 Isometric 3D Layered Breadcrumb with Extruded Tiles

The trail tilted onto an isometric plane: perspective on the stage, a rotateX/rotateZ plane, and crumbs extruded by a stack of six hairline shadows so each reads as a physical tile. Hover lifts a tile toward the viewer on the Z axis; motion-reduce: flattens the whole scene to 2D.

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-09 w-full min-h-svh grid place-items-center bg-tbc09-bg font-tbc09-sans px-10 pt-14 pb-18 perspective-[900px]">
  <nav aria-label="Breadcrumb" class="transform-3d rotate-x-[52deg] rotate-z-[-42deg] motion-reduce:rotate-x-0 motion-reduce:rotate-z-0">
    <ol class="flex gap-4 list-none m-0 p-0 transform-3d">
      <li><a href="#" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline bg-tbc09-tile shadow-[0_1px_var(--color-tbc09-side),0_2px_var(--color-tbc09-side),0_3px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_5px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side2),0_8px_12px_oklch(0_0_0/0.3)] transition-[translate,box-shadow] duration-200 hover:translate-z-4 hover:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_20px_22px_oklch(0_0_0/0.32)] focus-visible:outline-none focus-visible:translate-z-4 focus-visible:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_0_0_3px_white,0_20px_22px_oklch(0_0_0/0.32)] motion-reduce:transition-none motion-reduce:hover:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">Home</a></li>
      <li><a href="#" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline bg-tbc09-tile shadow-[0_1px_var(--color-tbc09-side),0_2px_var(--color-tbc09-side),0_3px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_5px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side2),0_8px_12px_oklch(0_0_0/0.3)] transition-[translate,box-shadow] duration-200 hover:translate-z-4 hover:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_20px_22px_oklch(0_0_0/0.32)] focus-visible:outline-none focus-visible:translate-z-4 focus-visible:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_0_0_3px_white,0_20px_22px_oklch(0_0_0/0.32)] motion-reduce:transition-none motion-reduce:hover:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">World</a></li>
      <li><a href="#" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline bg-tbc09-tile shadow-[0_1px_var(--color-tbc09-side),0_2px_var(--color-tbc09-side),0_3px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_5px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side2),0_8px_12px_oklch(0_0_0/0.3)] transition-[translate,box-shadow] duration-200 hover:translate-z-4 hover:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_20px_22px_oklch(0_0_0/0.32)] focus-visible:outline-none focus-visible:translate-z-4 focus-visible:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_0_0_3px_white,0_20px_22px_oklch(0_0_0/0.32)] motion-reduce:transition-none motion-reduce:hover:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">Levels</a></li>
      <li><a href="#" aria-current="page" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline translate-z-2 bg-tbc09-current shadow-[0_1px_var(--color-tbc09-currentside),0_2px_var(--color-tbc09-currentside),0_3px_var(--color-tbc09-currentside),0_4px_var(--color-tbc09-currentside),0_5px_var(--color-tbc09-currentside),0_6px_var(--color-tbc09-currentside2),0_8px_12px_oklch(0_0_0/0.3)] focus-visible:outline-none focus-visible:shadow-[0_1px_var(--color-tbc09-currentside),0_3px_var(--color-tbc09-currentside),0_5px_var(--color-tbc09-currentside),0_6px_var(--color-tbc09-currentside2),0_0_0_3px_white,0_12px_16px_oklch(0_0_0/0.3)] motion-reduce:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">Stage 4</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc09-bg: #dfe0f0;
  --color-tbc09-bg: oklch(0.94 0.02 265);
  --color-tbc09-tile: #7b87d8;
  --color-tbc09-tile: oklch(0.62 0.13 265);
  --color-tbc09-side: #4a56a8;
  --color-tbc09-side: oklch(0.42 0.1 265);
  --color-tbc09-side2: #454f9e;
  --color-tbc09-side2: oklch(0.4 0.09 265);
  --color-tbc09-current: #e8794f;
  --color-tbc09-current: oklch(0.68 0.19 30);
  --color-tbc09-currentside: #a84f2c;
  --color-tbc09-currentside: oklch(0.5 0.14 30);
  --color-tbc09-currentside2: #9e4a29;
  --color-tbc09-currentside2: oklch(0.48 0.13 30);
  --font-tbc09-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-09 {
  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-tbc09-bg: #dfe0f0;
  --color-tbc09-bg: oklch(0.94 0.02 265);
  --color-tbc09-tile: #7b87d8;
  --color-tbc09-tile: oklch(0.62 0.13 265);
  --color-tbc09-side: #4a56a8;
  --color-tbc09-side: oklch(0.42 0.1 265);
  --color-tbc09-side2: #454f9e;
  --color-tbc09-side2: oklch(0.4 0.09 265);
  --color-tbc09-current: #e8794f;
  --color-tbc09-current: oklch(0.68 0.19 30);
  --color-tbc09-currentside: #a84f2c;
  --color-tbc09-currentside: oklch(0.5 0.14 30);
  --color-tbc09-currentside2: #9e4a29;
  --color-tbc09-currentside2: oklch(0.48 0.13 30);
  --font-tbc09-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

  • Every 3D property has a real v4 utility — perspective-*, transform-3d, rotate-x-*, rotate-z-*, translate-z-* — so this demo needs no arbitrary transform at all. Only the shadow stacks are arbitrary, and they are colour data, not geometry.
  • The focus ring lives INSIDE the shadow stack because an outline on a rotated plane renders rotated too. Restating the stack is verbose and it is the only honest option.
  • motion-reduce: flattens the plane AND swaps the six-shadow stack for a single soft one, so the reduced-motion version is a clean 2D trail rather than a tilted static scene.
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 Isometric 3D Layered Breadcrumb with Extruded Tiles
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-isometric-3d-layered-breadcrumb-extruded-tiles/

The trail tilted onto an isometric plane: perspective on the stage, a rotateX/rotateZ plane, and crumbs extruded by a stack of six hairline shadows so each reads as a physical tile. Hover lifts a tile toward the viewer on the Z axis; motion-reduce: flattens the whole scene to 2D.
## HTML
```html
<section class="tbc-09 w-full min-h-svh grid place-items-center bg-tbc09-bg font-tbc09-sans px-10 pt-14 pb-18 perspective-[900px]">
  <nav aria-label="Breadcrumb" class="transform-3d rotate-x-[52deg] rotate-z-[-42deg] motion-reduce:rotate-x-0 motion-reduce:rotate-z-0">
    <ol class="flex gap-4 list-none m-0 p-0 transform-3d">
      <li><a href="#" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline bg-tbc09-tile shadow-[0_1px_var(--color-tbc09-side),0_2px_var(--color-tbc09-side),0_3px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_5px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side2),0_8px_12px_oklch(0_0_0/0.3)] transition-[translate,box-shadow] duration-200 hover:translate-z-4 hover:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_20px_22px_oklch(0_0_0/0.32)] focus-visible:outline-none focus-visible:translate-z-4 focus-visible:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_0_0_3px_white,0_20px_22px_oklch(0_0_0/0.32)] motion-reduce:transition-none motion-reduce:hover:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">Home</a></li>
      <li><a href="#" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline bg-tbc09-tile shadow-[0_1px_var(--color-tbc09-side),0_2px_var(--color-tbc09-side),0_3px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_5px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side2),0_8px_12px_oklch(0_0_0/0.3)] transition-[translate,box-shadow] duration-200 hover:translate-z-4 hover:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_20px_22px_oklch(0_0_0/0.32)] focus-visible:outline-none focus-visible:translate-z-4 focus-visible:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_0_0_3px_white,0_20px_22px_oklch(0_0_0/0.32)] motion-reduce:transition-none motion-reduce:hover:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">World</a></li>
      <li><a href="#" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline bg-tbc09-tile shadow-[0_1px_var(--color-tbc09-side),0_2px_var(--color-tbc09-side),0_3px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_5px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side2),0_8px_12px_oklch(0_0_0/0.3)] transition-[translate,box-shadow] duration-200 hover:translate-z-4 hover:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_20px_22px_oklch(0_0_0/0.32)] focus-visible:outline-none focus-visible:translate-z-4 focus-visible:shadow-[0_2px_var(--color-tbc09-side),0_4px_var(--color-tbc09-side),0_6px_var(--color-tbc09-side),0_8px_var(--color-tbc09-side),0_10px_var(--color-tbc09-side),0_12px_var(--color-tbc09-side2),0_0_0_3px_white,0_20px_22px_oklch(0_0_0/0.32)] motion-reduce:transition-none motion-reduce:hover:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">Levels</a></li>
      <li><a href="#" aria-current="page" class="flex items-center justify-center min-w-[74px] h-11 px-3.5 rounded-lg text-[13px] font-bold text-white no-underline translate-z-2 bg-tbc09-current shadow-[0_1px_var(--color-tbc09-currentside),0_2px_var(--color-tbc09-currentside),0_3px_var(--color-tbc09-currentside),0_4px_var(--color-tbc09-currentside),0_5px_var(--color-tbc09-currentside),0_6px_var(--color-tbc09-currentside2),0_8px_12px_oklch(0_0_0/0.3)] focus-visible:outline-none focus-visible:shadow-[0_1px_var(--color-tbc09-currentside),0_3px_var(--color-tbc09-currentside),0_5px_var(--color-tbc09-currentside),0_6px_var(--color-tbc09-currentside2),0_0_0_3px_white,0_12px_16px_oklch(0_0_0/0.3)] motion-reduce:translate-z-0 motion-reduce:shadow-[0_2px_6px_oklch(0_0_0/0.2)]">Stage 4</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc09-bg: #dfe0f0;
  --color-tbc09-bg: oklch(0.94 0.02 265);
  --color-tbc09-tile: #7b87d8;
  --color-tbc09-tile: oklch(0.62 0.13 265);
  --color-tbc09-side: #4a56a8;
  --color-tbc09-side: oklch(0.42 0.1 265);
  --color-tbc09-side2: #454f9e;
  --color-tbc09-side2: oklch(0.4 0.09 265);
  --color-tbc09-current: #e8794f;
  --color-tbc09-current: oklch(0.68 0.19 30);
  --color-tbc09-currentside: #a84f2c;
  --color-tbc09-currentside: oklch(0.5 0.14 30);
  --color-tbc09-currentside2: #9e4a29;
  --color-tbc09-currentside2: oklch(0.48 0.13 30);
  --font-tbc09-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

Three utilities make the scene. perspective-[900px] sets the viewer distance, transform-3d preserves the 3D context (Tailwind v4's name for transform-style:preserve-3d), and the two rotation utilities lay the plane down. The CSS version needed the same three properties; the difference is that they are now visible on the elements that own them.

The tile side is a shadow stack. Six shadows at 1px increments in a darker shade of the tile colour fake an extruded edge, and a seventh soft shadow grounds it. Hover doubles the increments and deepens the ground shadow, so the tile appears to rise.

Focus gets its own ring inside the stack. focus-visible: re-states the whole shadow value with 0_0_0_3px_white inserted — necessary, because an outline on a rotated element renders in the plane and reads as a smear.

Make it yours

  • Tilt: the two rotation values. rotate-x-[45deg] rotate-z-[-30deg] is a gentler axonometric.
  • Extrusion depth: the number of stacked shadows — six is chunky, three is a subtle lip.
  • Lift distance: hover:translate-z-4, and the matching deeper shadow set.

Gotchas — read before shipping

  • transform-3d must be on every ancestor between the perspective and the moving element, or translate-z silently does nothing.
  • Rotated text antialiases poorly at small sizes; 13px bold is about the floor for this treatment.
  • outline on a 3D-rotated element is unusable as a focus indicator — that is why focus re-states the shadow stack instead.
  • An isometric trail is a showpiece. It is genuinely harder to read than a flat one, so it belongs on a landing page, not a checkout.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

CSS 3D transforms are universally supported; v4's transform-3d, perspective-* and translate-z-* utilities are v4-only, which is the quoted floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

3D transforms (perspective + preserve-3d)tw ↗perspectivetw ↗box-shadowtw ↗transitionstw ↗prefers-reduced-motiontw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →