39 CSS Breadcrumbs09 / 39

Pure CSSMIT licensed

Isometric 3D Layered CSS Breadcrumb Navigation

A breadcrumb tilted into isometric 3D: the whole trail sits on an angled plane via a rotateX/rotateZ transform, each crumb extruded with a stacked box-shadow 'side', so the path looks like physical tiles laid on a surface. A hover raises the tile toward the viewer — a striking showpiece built with pure CSS 3D transforms.

Published

Live Demo
Try it

The code

<nav class="bc-09" aria-label="Breadcrumb">
  <div class="bc-09__plane">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Levels</a></li>
      <li><a href="#" aria-current="page">Stage 4</a></li>
    </ol>
  </div>
</nav>
.bc-09 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 56px 40px 70px;
  background: oklch(0.94 0.02 265);
  display: flex;
  justify-content: center;
  perspective: 900px;
  align-items: center;
  justify-content: center;
}

.bc-09 * {
  box-sizing: border-box;
}

.bc-09__plane {
  transform-style: preserve-3d;
  transform: rotateX(52deg) rotateZ(-42deg);
}

.bc-09 ol {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

.bc-09 a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font: 700 13px/1 system-ui,sans-serif;
  color: #fff;
  text-decoration: none;
  background: oklch(0.62 0.13 265);
  box-shadow: 0 1px oklch(0.42 0.1 265),0 2px oklch(0.42 0.1 265),0 3px oklch(0.42 0.1 265),0 4px oklch(0.42 0.1 265),0 5px oklch(0.42 0.1 265),0 6px oklch(0.4 0.09 265),0 8px 12px rgba(0,0,0,.3);
  transition: transform .2s ease,box-shadow .2s ease;
}

.bc-09 a:hover,
.bc-09 a:focus-visible {
  transform: translateZ(16px);
  box-shadow: 0 2px oklch(0.42 0.1 265),0 4px oklch(0.42 0.1 265),0 6px oklch(0.42 0.1 265),0 8px oklch(0.42 0.1 265),0 10px oklch(0.42 0.1 265),0 12px oklch(0.4 0.09 265),0 20px 22px rgba(0,0,0,.32);
  outline: none;
}

.bc-09 a:focus-visible {
  box-shadow: 0 2px oklch(0.42 0.1 265),0 4px oklch(0.42 0.1 265),0 6px oklch(0.42 0.1 265),0 8px oklch(0.42 0.1 265),0 10px oklch(0.42 0.1 265),0 12px oklch(0.4 0.09 265),0 0 0 3px #fff,0 20px 22px rgba(0,0,0,.32);
}

.bc-09 li[aria-current="page"] a {
  background: oklch(0.68 0.19 30);
  box-shadow: 0 1px oklch(0.5 0.14 30),0 2px oklch(0.5 0.14 30),0 3px oklch(0.5 0.14 30),0 4px oklch(0.5 0.14 30),0 5px oklch(0.5 0.14 30),0 6px oklch(0.48 0.13 30),0 8px 12px rgba(0,0,0,.3);
  transform: translateZ(8px);
}

@media (prefers-reduced-motion: reduce) {
  .bc-09__plane {
    transform: none;
  }

  .bc-09 a {
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: none;
  }

  .bc-09 a:hover,
    .bc-09 a:focus-visible {
    transform: none;
  }
}
/* No JavaScript — perspective + rotateX/rotateZ tilt the trail onto an isometric plane; a stacked box-shadow fakes tile extrusion, translateZ lifts on hover. Reduced-motion flattens to 2D. */
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 Breadcrumb 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: Isometric 3D Layered CSS Breadcrumb Navigation
Source: https://codefronts.com/navigation/css-breadcrumbs/isometric-3d-layered-css-breadcrumb-navigation/

A breadcrumb tilted into isometric 3D: the whole trail sits on an angled plane via a rotateX/rotateZ transform, each crumb extruded with a stacked box-shadow 'side', so the path looks like physical tiles laid on a surface. A hover raises the tile toward the viewer — a striking showpiece built with pure CSS 3D transforms.
## HTML
```html
<nav class="bc-09" aria-label="Breadcrumb">
  <div class="bc-09__plane">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Levels</a></li>
      <li><a href="#" aria-current="page">Stage 4</a></li>
    </ol>
  </div>
</nav>
```
## CSS
```css
.bc-09 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 56px 40px 70px;
  background: oklch(0.94 0.02 265);
  display: flex;
  justify-content: center;
  perspective: 900px;
  align-items: center;
  justify-content: center;
}

.bc-09 * {
  box-sizing: border-box;
}

.bc-09__plane {
  transform-style: preserve-3d;
  transform: rotateX(52deg) rotateZ(-42deg);
}

.bc-09 ol {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

.bc-09 a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font: 700 13px/1 system-ui,sans-serif;
  color: #fff;
  text-decoration: none;
  background: oklch(0.62 0.13 265);
  box-shadow: 0 1px oklch(0.42 0.1 265),0 2px oklch(0.42 0.1 265),0 3px oklch(0.42 0.1 265),0 4px oklch(0.42 0.1 265),0 5px oklch(0.42 0.1 265),0 6px oklch(0.4 0.09 265),0 8px 12px rgba(0,0,0,.3);
  transition: transform .2s ease,box-shadow .2s ease;
}

.bc-09 a:hover,
.bc-09 a:focus-visible {
  transform: translateZ(16px);
  box-shadow: 0 2px oklch(0.42 0.1 265),0 4px oklch(0.42 0.1 265),0 6px oklch(0.42 0.1 265),0 8px oklch(0.42 0.1 265),0 10px oklch(0.42 0.1 265),0 12px oklch(0.4 0.09 265),0 20px 22px rgba(0,0,0,.32);
  outline: none;
}

.bc-09 a:focus-visible {
  box-shadow: 0 2px oklch(0.42 0.1 265),0 4px oklch(0.42 0.1 265),0 6px oklch(0.42 0.1 265),0 8px oklch(0.42 0.1 265),0 10px oklch(0.42 0.1 265),0 12px oklch(0.4 0.09 265),0 0 0 3px #fff,0 20px 22px rgba(0,0,0,.32);
}

.bc-09 li[aria-current="page"] a {
  background: oklch(0.68 0.19 30);
  box-shadow: 0 1px oklch(0.5 0.14 30),0 2px oklch(0.5 0.14 30),0 3px oklch(0.5 0.14 30),0 4px oklch(0.5 0.14 30),0 5px oklch(0.5 0.14 30),0 6px oklch(0.48 0.13 30),0 8px 12px rgba(0,0,0,.3);
  transform: translateZ(8px);
}

@media (prefers-reduced-motion: reduce) {
  .bc-09__plane {
    transform: none;
  }

  .bc-09 a {
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: none;
  }

  .bc-09 a:hover,
    .bc-09 a:focus-visible {
    transform: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — perspective + rotateX/rotateZ tilt the trail onto an isometric plane; a stacked box-shadow fakes tile extrusion, translateZ lifts on hover. Reduced-motion flattens to 2D. */
```

How this works

The <ol> gets a perspective and its inner wrapper is rotated onto an isometric plane with transform:rotateX(52deg) rotateZ(-42deg) — the classic iso angle. Each crumb tile is extruded by a hard, layered box-shadow stack (many 1px offsets in a darker shade) that fakes a solid 3D 'side wall' beneath the top face — the cheapest way to get extrusion depth without real 3D geometry. transform-style:preserve-3d keeps the tiles on the shared plane.

Interaction sells the physicality: on :hover/:focus-visible a tile lifts along the plane's normal with translateZ() and its shadow stack lengthens, so it rises toward you and casts further. The current tile rests slightly raised in the accent colour. This is deliberately expressive — great for portfolios and creative dashboards. It stays accessible: the DOM order is a normal <ol>, focus works through the tilt, and prefers-reduced-motion flattens the plane to a normal bar so motion-sensitive users get a legible fallback.

Make it yours

  • Iso angle: the rotateX/rotateZ pair is the camera — tweak both together to re-pitch the plane.
  • Extrusion depth = the number/length of stacked box-shadow layers; more layers = taller tiles.
  • Lift height on hover is one translateZ() value; pair with a longer shadow for a bigger jump.
  • Flatten gracefully: the reduced-motion block already ships a 2D fallback — reuse it as a mobile default if the tilt crowds small screens.

Gotchas — read before shipping

  • 3D transforms need perspective on the parent and transform-style:preserve-3d on the transformed wrapper, or tiles render flat.
  • Tilted text can blur — keep labels ≥13px and avoid sub-pixel translateZ values; snap lifts to whole pixels.
  • Hit areas shift under rotation — test that the visually-raised tile is still clickable where it appears (it is, since transforms move the box).
  • Always ship the reduced-motion 2D fallback; an isometric-only trail is a usability and accessibility risk on its own.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

CSS 3D transforms (perspective, rotateX/Z, translateZ, preserve-3d) are universally supported for a decade. Purely a visual showpiece.

Techniques used in this demo

3D transforms (perspective + preserve-3d)oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →