39 CSS Breadcrumbs
14 / 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

Compact Icon-Only Home Node CSS Breadcrumb Bar

A space-saving breadcrumb that replaces the word 'Home' with an accessible house icon while keeping the full text for screen readers — the compact convention seen across modern apps. Demonstrates the correct visually-hidden pattern so the icon-only node never loses its accessible name.

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-14" aria-label="Breadcrumb">
  <ol>
    <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><span class="bc-14__sr">Home</span></a></li>
    <li><a href="#">Help Center</a></li>
    <li><a href="#">Billing</a></li>
    <li><a href="#" aria-current="page">Refunds</a></li>
  </ol>
</nav>
.bc-14 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.55 0.14 235);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.98 0.004 235);
  place-items: center;
}

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

.bc-14 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-14 li {
  display: flex;
  align-items: center;
}

.bc-14 li + li::before {
  content: "›";
  margin: 0 8px;
  color: oklch(0.72 0.02 235);
}

.bc-14 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 9px;
  font: 600 13.5px/1 system-ui,sans-serif;
  color: oklch(0.46 0.05 235);
  text-decoration: none;
  transition: background-color .18s ease,color .18s ease;
}

.bc-14 a:hover {
  color: var(--accent);
  background: color-mix(in oklab,var(--accent) 12%,transparent);
}

.bc-14 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-14 svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.bc-14__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bc-14 a {
    transition: none;
  }
}
/* No JavaScript — the home node is an SVG plus a visually-hidden .sr-only "Home" label (clip-path:inset(50%)), so screen readers keep the name while sighted users see only the icon. */
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: Compact Icon-Only Home Node CSS Breadcrumb Bar
Source: https://codefronts.com/navigation/css-breadcrumbs/compact-icon-only-home-node-css-breadcrumb-bar/

A space-saving breadcrumb that replaces the word 'Home' with an accessible house icon while keeping the full text for screen readers — the compact convention seen across modern apps. Demonstrates the correct visually-hidden pattern so the icon-only node never loses its accessible name.
## HTML
```html
<nav class="bc-14" aria-label="Breadcrumb">
  <ol>
    <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5"/></svg><span class="bc-14__sr">Home</span></a></li>
    <li><a href="#">Help Center</a></li>
    <li><a href="#">Billing</a></li>
    <li><a href="#" aria-current="page">Refunds</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-14 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.55 0.14 235);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.98 0.004 235);
  place-items: center;
}

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

.bc-14 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-14 li {
  display: flex;
  align-items: center;
}

.bc-14 li + li::before {
  content: "›";
  margin: 0 8px;
  color: oklch(0.72 0.02 235);
}

.bc-14 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 9px;
  font: 600 13.5px/1 system-ui,sans-serif;
  color: oklch(0.46 0.05 235);
  text-decoration: none;
  transition: background-color .18s ease,color .18s ease;
}

.bc-14 a:hover {
  color: var(--accent);
  background: color-mix(in oklab,var(--accent) 12%,transparent);
}

.bc-14 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-14 svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.bc-14__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

## JavaScript
```js
/* No JavaScript — the home node is an SVG plus a visually-hidden .sr-only "Home" label (clip-path:inset(50%)), so screen readers keep the name while sighted users see only the icon. */
```

How this works

The first crumb is an icon-only home node: an inline SVG house plus a visually-hidden "Home" label. The label uses the canonical .sr-only clip pattern (1px box, clip-path:inset(50%), white-space:nowrap) so it's removed from the visual layout but still present in the accessibility tree — a screen reader announces "Home, link" while sighted users see just the house. This is the right way to do icon-only navigation; display:none or visibility:hidden would strip the name and fail WCAG.

The rest of the trail is normal text crumbs with chevron separators. The home icon gets a comfortable 44px hit target and the same hover/focus treatment as text links, so it's equally operable by mouse, touch and keyboard. An aria-label on the link is an alternative to the visually-hidden span (the demo documents both); the key principle is that the icon must always carry a programmatic name. It's the compact pattern for deep trails where a text 'Home' wastes space.

Make it yours

  • Swap the house SVG for any single-path icon (grid, logo mark) — keep the visually-hidden label matching what it means.
  • Use aria-label="Home" on the link instead of the span if you prefer — either gives the node a name.
  • Make more crumbs icon-only (e.g. a cart) on very tight bars, each with its own hidden label.
  • Add a tiny tooltip on the home icon (demo 02's pattern) for a visible hint on hover.

Gotchas — read before shipping

  • Never use display:none or visibility:hidden for the label — both remove it from the accessibility tree; use the .sr-only clip pattern.
  • An icon with no text and no aria-label is an unnamed link — a serious WCAG failure; always provide a name.
  • Keep the icon's hit target ≥ 44px even though the glyph is small — pad the link, don't shrink the target.
  • Decorative separators still get aria-hidden/pseudo-element treatment — only the home label is meaningfully hidden-but-present.

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 all.

Inline SVG + the visually-hidden clip pattern are universally supported. This is an accessibility-pattern demo, deliberately conservative in CSS.

Techniques used in this demo

clip-pathMDN ↗color-mix()MDN ↗place-items / place-contentMDN ↗:focus-visibleMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →