39 CSS Breadcrumbs24 / 39

Pure CSSMIT licensed

Multi-Line Aligned CSS Grid Subgrid Breadcrumb Layout

A breadcrumb where icon, label and separator stay in perfect vertical alignment even when the trail wraps across multiple lines — solved with CSS subgrid. Each crumb inherits the parent grid's column tracks, so every icon column and every separator lines up down the whole wrapped trail like a table, without a table.

Published Updated

Live Demo
Try it

The code

<nav class="bc-24" aria-label="Breadcrumb">
  <ol>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><a href="#">Home</a><span class="bc-24__sep" aria-hidden="true">›</span></li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg><a href="#">Documentation</a><span class="bc-24__sep" aria-hidden="true">›</span></li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10"/></svg><a href="#">CSS Layout Techniques</a><span class="bc-24__sep" aria-hidden="true">›</span></li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/></svg><a href="#" aria-current="page">Subgrid Alignment Guide</a></li>
  </ol>
</nav>
.bc-24 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 28px;
  background: oklch(0.97 0.006 200);
  place-items: center;
}

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

.bc-24 ol {
  display: grid;
  grid-template-columns: repeat(3,auto);
  justify-content: start;
  align-items: center;
  column-gap: 9px;
  row-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-24 li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  align-items: center;
  gap: 9px;
}

.bc-24 svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: oklch(0.55 0.06 200);
}

.bc-24 a {
  font: 600 14px/1 system-ui,sans-serif;
  color: oklch(0.45 0.08 210);
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 6px;
  transition: color .15s ease;
}

.bc-24 a:hover {
  color: oklch(0.38 0.13 215);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bc-24 a:focus-visible {
  outline: 2px solid oklch(0.5 0.15 215);
  outline-offset: 2px;
}

.bc-24__sep {
  color: oklch(0.72 0.03 200);
  font-size: 15px;
  justify-self: center;
}

.bc-24 li[aria-current="page"] {
  grid-column: span 2;
}

.bc-24 li[aria-current="page"] a {
  color: oklch(0.3 0.02 210);
  font-weight: 700;
}
/* No JavaScript — each <li> is grid-template-columns:subgrid spanning the parent's [icon][label][sep] tracks, so every column stays aligned even when the trail wraps. */
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: Multi-Line Aligned CSS Grid Subgrid Breadcrumb Layout
Source: https://codefronts.com/navigation/css-breadcrumbs/vertical-stacked/

A breadcrumb where icon, label and separator stay in perfect vertical alignment even when the trail wraps across multiple lines — solved with CSS subgrid. Each crumb inherits the parent grid's column tracks, so every icon column and every separator lines up down the whole wrapped trail like a table, without a table.
## HTML
```html
<nav class="bc-24" aria-label="Breadcrumb">
  <ol>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><a href="#">Home</a><span class="bc-24__sep" aria-hidden="true">›</span></li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg><a href="#">Documentation</a><span class="bc-24__sep" aria-hidden="true">›</span></li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10"/></svg><a href="#">CSS Layout Techniques</a><span class="bc-24__sep" aria-hidden="true">›</span></li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/></svg><a href="#" aria-current="page">Subgrid Alignment Guide</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-24 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 28px;
  background: oklch(0.97 0.006 200);
  place-items: center;
}

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

.bc-24 ol {
  display: grid;
  grid-template-columns: repeat(3,auto);
  justify-content: start;
  align-items: center;
  column-gap: 9px;
  row-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-24 li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  align-items: center;
  gap: 9px;
}

.bc-24 svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: oklch(0.55 0.06 200);
}

.bc-24 a {
  font: 600 14px/1 system-ui,sans-serif;
  color: oklch(0.45 0.08 210);
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 6px;
  transition: color .15s ease;
}

.bc-24 a:hover {
  color: oklch(0.38 0.13 215);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bc-24 a:focus-visible {
  outline: 2px solid oklch(0.5 0.15 215);
  outline-offset: 2px;
}

.bc-24__sep {
  color: oklch(0.72 0.03 200);
  font-size: 15px;
  justify-self: center;
}

.bc-24 li[aria-current="page"] {
  grid-column: span 2;
}

.bc-24 li[aria-current="page"] a {
  color: oklch(0.3 0.02 210);
  font-weight: 700;
}
```

## JavaScript
```js
/* No JavaScript — each <li> is grid-template-columns:subgrid spanning the parent's [icon][label][sep] tracks, so every column stays aligned even when the trail wraps. */
```

How this works

The <ol> is a grid whose crumbs flow into a repeating three-column rhythm: [icon] [label] [sep]. Each <li> declares display:grid;grid-template-columns:subgrid;grid-column:span 3, so instead of inventing its own tracks it adopts the parent's. The payoff shows when the trail wraps: on line two, the icons still sit in the icon track, labels in the label track, separators in the sep track — everything aligned to the same vertical grid as line one. Without subgrid each wrapped line would pack tightly and misalign; subgrid is the only way to get true cross-line alignment in pure CSS.

The icons are inline SVGs sharing stroke:currentColor so they tint with their crumb, the separator is a chevron in its own track (not a pseudo-element, so it participates in the grid), and the current crumb drops its trailing separator. Because alignment is structural, long and short labels coexist without ragged columns — ideal for deep category trees that wrap on tablets.

Make it yours

  • Add a track (e.g. a count badge) by widening the repeat to 4 columns and span 4 per crumb — subgrid keeps the new column aligned too.
  • row-gap on the parent controls the space between wrapped lines; column-gap controls intra-crumb spacing — tune independently.
  • Right-align labels by setting justify-self:end in the label track; the whole column follows.
  • Swap the chevron track for a slash or a masked SVG — it's a real grid cell, style it freely.

Gotchas — read before shipping

  • Subgrid only inherits tracks on the axis you name — grid-template-columns:subgrid gives column alignment; you must also set the parent's columns for it to inherit anything.
  • The child must span the exact number of parent columns it maps to (span 3 here) or the cells drift out of the shared tracks.
  • Firefox shipped subgrid first (2019) but Chrome only in 117 — verify your floor; the fallback (no subgrid) still renders, just without cross-line alignment.
  • Don't mix pseudo-element separators with subgrid — put the separator in a real cell so it occupies a track.

Browser support

ChromeSafariFirefoxEdge
117+16+71+117+

Subgrid is baseline as of Chrome 117 (Sept 2023) — now universal in evergreen. This is the newest layout primitive in the set; degrade gracefully below it.

Techniques used in this demo

grid-templateMDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →