39 CSS Breadcrumbs36 / 39

Pure CSSMIT licensed

Outline Border-Only Geometric CSS Breadcrumbs

A wireframe breadcrumb with no solid fills: each crumb is an outlined chevron shape drawn with borders and a clip-path cutout, so the trail reads as clean line-art. Hover fills the outline; the current crumb inverts to a solid. The technical, blueprint aesthetic for developer tools and design systems.

Published Updated

Live Demo
Try it

The code

<nav class="bc-36" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">System</a></li>
    <li><a href="#">Modules</a></li>
    <li><a href="#" aria-current="page">Renderer</a></li>
  </ol>
</nav>
.bc-36 {
  width: 100%;
  min-height: 100vh;
  --d: 15px;
  --accent: oklch(0.55 0.16 200);
  font-family: 'SF Mono',ui-monospace,'Cascadia Code',monospace;
  padding: 30px;
  background: oklch(0.98 0.005 200);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.bc-36 ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-36 a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px 0 24px;
  margin-inline-start: calc(var(--d) * -1);
  font: 600 12px/1 ui-monospace,monospace;
  letter-spacing: .02em;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% 50%,calc(100% - var(--d)) 100%,0 100%,var(--d) 50%);
  transition: background-color .18s ease,color .18s ease;
}

.bc-36 li:first-child a {
  margin-inline-start: 0;
  padding-left: 18px;
  clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% 50%,calc(100% - var(--d)) 100%,0 100%);
}

.bc-36 li:last-child a {
  padding-right: 20px;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--d) 50%);
}

.bc-36 a:hover {
  background: color-mix(in oklab,var(--accent) 12%,transparent);
  color: oklch(0.4 0.16 205);
}

.bc-36 a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent),inset 0 0 0 4px color-mix(in oklab,var(--accent) 30%,transparent);
}

.bc-36 li[aria-current="page"] a {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .bc-36 a {
    transition: none;
  }
}
/* No JavaScript — outlined chevrons drawn with inset box-shadow (so clip-path keeps the border crisp); hover fills the outline, the current page inverts to a solid. */
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: Outline Border-Only Geometric CSS Breadcrumbs
Source: https://codefronts.com/navigation/css-breadcrumbs/brutalist-hard-shadow/

A wireframe breadcrumb with no solid fills: each crumb is an outlined chevron shape drawn with borders and a clip-path cutout, so the trail reads as clean line-art. Hover fills the outline; the current crumb inverts to a solid. The technical, blueprint aesthetic for developer tools and design systems.
## HTML
```html
<nav class="bc-36" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">System</a></li>
    <li><a href="#">Modules</a></li>
    <li><a href="#" aria-current="page">Renderer</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-36 {
  width: 100%;
  min-height: 100vh;
  --d: 15px;
  --accent: oklch(0.55 0.16 200);
  font-family: 'SF Mono',ui-monospace,'Cascadia Code',monospace;
  padding: 30px;
  background: oklch(0.98 0.005 200);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.bc-36 ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-36 a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px 0 24px;
  margin-inline-start: calc(var(--d) * -1);
  font: 600 12px/1 ui-monospace,monospace;
  letter-spacing: .02em;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% 50%,calc(100% - var(--d)) 100%,0 100%,var(--d) 50%);
  transition: background-color .18s ease,color .18s ease;
}

.bc-36 li:first-child a {
  margin-inline-start: 0;
  padding-left: 18px;
  clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% 50%,calc(100% - var(--d)) 100%,0 100%);
}

.bc-36 li:last-child a {
  padding-right: 20px;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--d) 50%);
}

.bc-36 a:hover {
  background: color-mix(in oklab,var(--accent) 12%,transparent);
  color: oklch(0.4 0.16 205);
}

.bc-36 a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent),inset 0 0 0 4px color-mix(in oklab,var(--accent) 30%,transparent);
}

.bc-36 li[aria-current="page"] a {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .bc-36 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — outlined chevrons drawn with inset box-shadow (so clip-path keeps the border crisp); hover fills the outline, the current page inverts to a solid. */
```

How this works

Each crumb is transparent with a 1.5px accent border and the same six-point chevron clip-path as demo 01 — but because there's no fill, the clip-path would slice the border off. The fix is the modern outline-shape approach: the border is drawn as an inset box-shadow (which the clip respects the same as the fill), giving a crisp outlined chevron with a notched left edge and pointed right edge, all in line-art. Crumbs interlock via negative inline margin exactly like the solid arrow demo.

State is an ink inversion: :hover/:focus-visible fills the outline with a faint accent tint and darkens the text; the current page inverts fully to a solid accent block with white text, the strongest possible 'you are here' against a field of outlines. Everything stays on one accent hue, so it reads as a coherent geometric system. It's the most 'engineered-looking' trail here — deliberately spare, high-contrast, and precise.

Make it yours

  • Border weight sets the line-art feel: 1px is delicate blueprint, 2px is bold technical.
  • Single-hue by default; introduce a second accent only for the current inversion if you want more pop.
  • Square-edge variant: drop the clip-path for outlined rectangles with gap — same border-as-shadow trick.
  • Add a faint grid or dotted background behind the trail to lean into the blueprint aesthetic.

Gotchas — read before shipping

  • A real border gets clipped by clip-path — draw the outline with an inset box-shadow so the clip keeps it crisp.
  • Focus rings clip too — use an additional inset shadow layer for :focus-visible, not outline.
  • Outlined text on a transparent trail must clear contrast against the PAGE background, not a fill — test on your actual surface.
  • Interlocking outlines can double-up at the seam; the negative margin overlap hides one edge — keep the overlap equal to the arrow depth.

Browser support

ChromeSafariFirefoxEdge
111+16.2+113+111+

Floor set by oklch(), color-mix() as this demo is written. The core technique itself goes back further — Chrome 55+.

clip-path + inset box-shadow outline is a long-standing technique; oklch() (2023) only sets the accent. Universal support for the mechanics.

Techniques used in this demo

clip-pathMDN ↗color-mix()MDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →