39 CSS Breadcrumbs11 / 39

Pure CSSMIT licensed

Full-Width Block-Style Segmented CSS Breadcrumb Bar

An edge-to-edge breadcrumb where each hierarchy step is a distinct full-height coloured block, the segments filling the entire bar width with equal or content-sized tracks — the bold, blocky navigation banner for app headers and section dividers. Segments meet flush with a subtle bevel between them.

Published

Live Demo
Try it

The code

<nav class="bc-11" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Region</a></li>
    <li><a href="#">Country</a></li>
    <li><a href="#" aria-current="page">City Guide</a></li>
  </ol>
</nav>
.bc-11 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  background: oklch(0.96 0.005 250);
  place-items: center;
}

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

.bc-11 ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bc-11 li {
  display: flex;
}

.bc-11 li:last-child {
  flex: 1;
}

.bc-11 a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 22px;
  font: 700 13px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(0,0,0,.12);
  transition: filter .18s ease;
}

.bc-11 li:nth-child(1) a {
  background: oklch(0.42 0.05 250);
}

.bc-11 li:nth-child(2) a {
  background: oklch(0.47 0.07 250);
}

.bc-11 li:nth-child(3) a {
  background: oklch(0.52 0.09 250);
}

.bc-11 li:last-child a {
  background: oklch(0.6 0.17 255);
}

.bc-11 a:hover {
  filter: brightness(1.1);
}

.bc-11 a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #fff;
}

@media (max-width: 560px) {
  .bc-11 ol {
    flex-direction: column;
  }

  .bc-11 li,
    .bc-11 li:last-child {
    flex: none;
  }

  .bc-11 a {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-11 a {
    transition: none;
  }
}
/* No JavaScript — full-width flex segments with inset-shadow bevels between blocks; a tonal palette ramp encodes depth, the current block right-fills and takes the accent. */
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: Full-Width Block-Style Segmented CSS Breadcrumb Bar
Source: https://codefronts.com/navigation/css-breadcrumbs/full-width-block-style-segmented-css-breadcrumb-bar/

An edge-to-edge breadcrumb where each hierarchy step is a distinct full-height coloured block, the segments filling the entire bar width with equal or content-sized tracks — the bold, blocky navigation banner for app headers and section dividers. Segments meet flush with a subtle bevel between them.
## HTML
```html
<nav class="bc-11" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Region</a></li>
    <li><a href="#">Country</a></li>
    <li><a href="#" aria-current="page">City Guide</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-11 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  background: oklch(0.96 0.005 250);
  place-items: center;
}

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

.bc-11 ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bc-11 li {
  display: flex;
}

.bc-11 li:last-child {
  flex: 1;
}

.bc-11 a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 22px;
  font: 700 13px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(0,0,0,.12);
  transition: filter .18s ease;
}

.bc-11 li:nth-child(1) a {
  background: oklch(0.42 0.05 250);
}

.bc-11 li:nth-child(2) a {
  background: oklch(0.47 0.07 250);
}

.bc-11 li:nth-child(3) a {
  background: oklch(0.52 0.09 250);
}

.bc-11 li:last-child a {
  background: oklch(0.6 0.17 255);
}

.bc-11 a:hover {
  filter: brightness(1.1);
}

.bc-11 a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #fff;
}

@media (max-width: 560px) {
  .bc-11 ol {
    flex-direction: column;
  }

  .bc-11 li,
    .bc-11 li:last-child {
    flex: none;
  }

  .bc-11 a {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  }
}

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

## JavaScript
```js
/* No JavaScript — full-width flex segments with inset-shadow bevels between blocks; a tonal palette ramp encodes depth, the current block right-fills and takes the accent. */
```

How this works

The bar is a full-width display:flex where each crumb block is a solid coloured segment. The demo shows both track modes: flex:1 for equal-width segments that fill the bar, or natural content width with the last (current) block taking the remaining space via flex:1. Blocks meet flush; a 1px inner bevel (a subtle inset shadow on one edge) separates them so the seam reads as a crease rather than a gap. The palette steps in tone across the trail so hierarchy depth is legible at a glance.

Each block fills its full height, making the bar a proper banner rather than a thin strip — good as a section header under a site nav. The current block takes the accent and white text; earlier blocks darken/mute progressively. Because blocks are simple flex children with solid fills, this is bulletproof across browsers and trivially responsive: under a breakpoint the blocks can stack vertically into a full-width column, each still edge-to-edge.

Make it yours

  • Equal vs content tracks: flex:1 on all for equal segments, or only on the current block to right-fill.
  • Palette: a monochrome lightness ramp reads as depth; a multi-hue ramp reads as categories.
  • Bevel style: inset light shadow for a raised crease, inset dark for a recessed seam.
  • Mobile: switch flex-direction to column under a breakpoint for a stacked full-width menu.

Gotchas — read before shipping

  • Edge-to-edge means no rounded outer corners by default — round only the first block's left and last block's right if you want a contained bar.
  • Ensure each block's text clears contrast on ITS fill — the palette ramp can push a mid-block below 4.5:1.
  • Flush seams need the bevel (inset shadow), not a border — borders add width and break the equal-track math.
  • When stacking on mobile, keep the current block visually distinct (accent) so 'you are here' survives the layout change.

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.

Flexbox, inset box-shadow bevels and solid fills are universally supported. oklch() (2023) only sets the palette ramp. Robust anywhere.

Techniques used in this demo

filterMDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →