39 CSS Breadcrumbs
24 / 39

All 39 in 39 CSS Breadcrumbs

  1. 01Accessible Breadcrumb Navigation with Schema.org Microdata & ARIA
  2. 02Responsive Collapsing CSS Breadcrumb Bar using :has() Selector
  3. 03Adaptive Light & Dark Mode Breadcrumb Bar with CSS Custom Properties
  4. 04E-Commerce Filter & Attribute Breadcrumb Navigation Component
  5. 05Modern Glassmorphism Floating Breadcrumb Bar UI Design
  6. 06Neumorphic Soft UI Breadcrumb Navigation with Dual Box Shadows
  7. 07Sticky Top CSS Navigation Header with Shrinking Breadcrumb Trail
  8. 08Material Design Flat Breadcrumb Navigation Bar
  9. 09Isometric 3D Layered CSS Breadcrumb Navigation
  10. 10Breadcrumb Bar with Built-In Dropdown Sibling Menus
  11. 11Full-Width Block-Style Segmented CSS Breadcrumb Bar
  12. 12CSS Custom-Property Accent-Color Toggle Breadcrumb
  13. 13Seamless Arrow-Cutout CSS3 Breadcrumb Trail
  14. 14Compact Icon-Only Home Node CSS Breadcrumb Bar
  15. 15Segmented Rounded-Outline Pill CSS Breadcrumb
  16. 16Neumorphic Soft Inset-Shadow CSS Breadcrumbs
  17. 17CSS Grid Auto-Fitting Responsive Breadcrumb Trail
  18. 18NFT/Web3 Holographic Shimmer Breadcrumb Component
  19. 19SaaS Marketing Site Gradient Text Breadcrumb Bar
  20. 20Airbnb-Style Filter Chip Breadcrumb Navigation with Icons
  21. 21Editorial Blog Breadcrumb with Animated Wave Underline Hover
  22. 22Developer Docs Breadcrumb with One-Click Path Copy to Clipboard
  23. 23Modern Pure CSS Arrow Breadcrumb Bar using clip-path Polygons
  24. 24Multi-Line Aligned CSS Grid Subgrid Breadcrumb Layout
  25. 25Interactive Breadcrumb Links with Animated CSS Underline Glow
  26. 26Minimalist CSS Breadcrumb with Custom SVG Separators
  27. 27Multi-Step Checkout & Form Wizard CSS Breadcrumb Indicator
  28. 28Pure CSS Ribbon-Style Chevron Breadcrumb Trail
  29. 29Pill-Shape Badge CSS Breadcrumb Bar UI
  30. 30Clean Line-Separator Minimalist CSS Breadcrumbs
  31. 31Gradient Background Glow CSS Breadcrumb Bar
  32. 32Floating Card Shadow CSS Breadcrumb Navigation
  33. 33Truncated Ellipsis Compact CSS Mobile Breadcrumb
  34. 34Inline Bullet-Point Dot Separator CSS Breadcrumb
  35. 35Skewed Parallel Quadrilateral CSS Breadcrumb Bar
  36. 36Outline Border-Only Geometric CSS Breadcrumbs
  37. 37Circular Icon & Numbered CSS Step Breadcrumbs
  38. 38Frosted Glass Dark UI CSS Breadcrumb Component
  39. 39Modern Micro-Interaction Animated Hover Breadcrumbs
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.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

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 ↗:focus-visibleMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →