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

Adaptive Light & Dark Mode Breadcrumb Bar with CSS Custom Properties

A breadcrumb whose entire skin flips between light and dark from one set of custom properties — respecting the OS via prefers-color-scheme AND allowing a manual [data-theme] override. Frosted-glass bar background for modern SaaS dashboards, and every colour is a token, so re-theming is a five-line edit.

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

<div class="bc-03">
  <input type="checkbox" id="bc-03-theme" class="bc-03__check" aria-label="Toggle dark mode">
  <div class="bc-03__row">
    <nav class="bc-03__nav" aria-label="Breadcrumb">
      <ol>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Aurora</a></li>
        <li><a href="#" aria-current="page">Settings</a></li>
      </ol>
    </nav>
    <label for="bc-03-theme" class="bc-03__toggle">
      <svg class="bc-03__sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
      <svg class="bc-03__moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
      <span class="bc-03__toggle-label">Theme</span>
    </label>
  </div>
</div>
.bc-03 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --bc-bg: oklch(1 0 0/.7);
  --bc-text: oklch(0.5 0.02 265);
  --bc-strong: oklch(0.25 0.02 265);
  --bc-accent: oklch(0.55 0.16 265);
  --bc-sep: oklch(0.75 0.02 265);
  --bc-hover: oklch(0.95 0.01 265);
  --bc-line: oklch(0.85 0.01 265/.7);
  color-scheme: light;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 28px;
  background: oklch(0.97 0.005 265);
  place-items: center;
  transition: background-color .3s ease;
}

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

.bc-03:has(.bc-03__check:checked) {
  --bc-bg: oklch(0.2 0.02 265/.7);
  --bc-text: oklch(0.72 0.02 265);
  --bc-strong: oklch(0.96 0.01 265);
  --bc-accent: oklch(0.72 0.15 265);
  --bc-sep: oklch(0.5 0.02 265);
  --bc-hover: oklch(0.28 0.02 265);
  --bc-line: oklch(0.4 0.02 265/.5);
  color-scheme: dark;
  background: oklch(0.14 0.02 265);
}

.bc-03 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .3s ease,border-color .3s ease;
}

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

.bc-03 li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--bc-sep);
}

.bc-03 a {
  padding: 5px 9px;
  border-radius: 7px;
  font: 500 13.5px/1 system-ui,sans-serif;
  color: var(--bc-text);
  text-decoration: none;
  transition: background-color .18s ease,color .18s ease;
}

.bc-03 a:hover {
  color: var(--bc-strong);
  background: var(--bc-hover);
}

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

.bc-03 li[aria-current="page"] a {
  color: var(--bc-strong);
  font-weight: 600;
  background: color-mix(in oklab,var(--bc-accent) 18%,transparent);
}

@media (prefers-reduced-motion: reduce) {
  .bc-03 ol,
    .bc-03 a {
    transition: none;
  }
}

.bc-03 .bc-03__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.bc-03 .bc-03__check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.bc-03 .bc-03__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid oklch(0.85 0.02 260);
  color: oklch(0.3 0.03 260);
  font: 600 12.5px/1 system-ui,sans-serif;
  cursor: pointer;
  transition: background .18s ease,border-color .18s ease,color .18s ease;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.bc-03 .bc-03__toggle:hover {
  background: color-mix(in oklch,currentColor 14%,transparent);
}

.bc-03 .bc-03__check:focus-visible + .bc-03__toggle {
  outline: 2px solid var(--accent,oklch(0.62 0.18 255));
  outline-offset: 2px;
}

.bc-03 .bc-03__toggle svg {
  width: 14px;
  height: 14px;
}

.bc-03 .bc-03__moon {
  display: none;
}

.bc-03:has(.bc-03__check:checked) .bc-03__toggle {
  background: oklch(0.22 0.02 260);
  border-color: oklch(0.35 0.02 260);
  color: oklch(0.95 0.005 260);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.bc-03:has(.bc-03__check:checked) .bc-03__sun {
  display: none;
}

.bc-03:has(.bc-03__check:checked) .bc-03__moon {
  display: inline-block;
}
/* No JavaScript — five custom-property tokens skin the trail; prefers-color-scheme sets the OS default, [data-theme] overrides it manually. Add ~3 lines to persist the choice. */
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: Adaptive Light & Dark Mode Breadcrumb Bar with CSS Custom Properties
Source: https://codefronts.com/navigation/css-breadcrumbs/adaptive-light-dark-mode-breadcrumb-bar-with-css-custom-properties/

A breadcrumb whose entire skin flips between light and dark from one set of custom properties — respecting the OS via prefers-color-scheme AND allowing a manual [data-theme] override. Frosted-glass bar background for modern SaaS dashboards, and every colour is a token, so re-theming is a five-line edit.
## HTML
```html
<div class="bc-03">
  <input type="checkbox" id="bc-03-theme" class="bc-03__check" aria-label="Toggle dark mode">
  <div class="bc-03__row">
    <nav class="bc-03__nav" aria-label="Breadcrumb">
      <ol>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Aurora</a></li>
        <li><a href="#" aria-current="page">Settings</a></li>
      </ol>
    </nav>
    <label for="bc-03-theme" class="bc-03__toggle">
      <svg class="bc-03__sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
      <svg class="bc-03__moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
      <span class="bc-03__toggle-label">Theme</span>
    </label>
  </div>
</div>
```
## CSS
```css
.bc-03 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --bc-bg: oklch(1 0 0/.7);
  --bc-text: oklch(0.5 0.02 265);
  --bc-strong: oklch(0.25 0.02 265);
  --bc-accent: oklch(0.55 0.16 265);
  --bc-sep: oklch(0.75 0.02 265);
  --bc-hover: oklch(0.95 0.01 265);
  --bc-line: oklch(0.85 0.01 265/.7);
  color-scheme: light;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 28px;
  background: oklch(0.97 0.005 265);
  place-items: center;
  transition: background-color .3s ease;
}

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

.bc-03:has(.bc-03__check:checked) {
  --bc-bg: oklch(0.2 0.02 265/.7);
  --bc-text: oklch(0.72 0.02 265);
  --bc-strong: oklch(0.96 0.01 265);
  --bc-accent: oklch(0.72 0.15 265);
  --bc-sep: oklch(0.5 0.02 265);
  --bc-hover: oklch(0.28 0.02 265);
  --bc-line: oklch(0.4 0.02 265/.5);
  color-scheme: dark;
  background: oklch(0.14 0.02 265);
}

.bc-03 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .3s ease,border-color .3s ease;
}

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

.bc-03 li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--bc-sep);
}

.bc-03 a {
  padding: 5px 9px;
  border-radius: 7px;
  font: 500 13.5px/1 system-ui,sans-serif;
  color: var(--bc-text);
  text-decoration: none;
  transition: background-color .18s ease,color .18s ease;
}

.bc-03 a:hover {
  color: var(--bc-strong);
  background: var(--bc-hover);
}

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

.bc-03 li[aria-current="page"] a {
  color: var(--bc-strong);
  font-weight: 600;
  background: color-mix(in oklab,var(--bc-accent) 18%,transparent);
}

@media (prefers-reduced-motion: reduce) {
  .bc-03 ol,
    .bc-03 a {
    transition: none;
  }
}

.bc-03 .bc-03__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.bc-03 .bc-03__check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.bc-03 .bc-03__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid oklch(0.85 0.02 260);
  color: oklch(0.3 0.03 260);
  font: 600 12.5px/1 system-ui,sans-serif;
  cursor: pointer;
  transition: background .18s ease,border-color .18s ease,color .18s ease;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.bc-03 .bc-03__toggle:hover {
  background: color-mix(in oklch,currentColor 14%,transparent);
}

.bc-03 .bc-03__check:focus-visible + .bc-03__toggle {
  outline: 2px solid var(--accent,oklch(0.62 0.18 255));
  outline-offset: 2px;
}

.bc-03 .bc-03__toggle svg {
  width: 14px;
  height: 14px;
}

.bc-03 .bc-03__moon {
  display: none;
}

.bc-03:has(.bc-03__check:checked) .bc-03__toggle {
  background: oklch(0.22 0.02 260);
  border-color: oklch(0.35 0.02 260);
  color: oklch(0.95 0.005 260);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.bc-03:has(.bc-03__check:checked) .bc-03__sun {
  display: none;
}

.bc-03:has(.bc-03__check:checked) .bc-03__moon {
  display: inline-block;
}
```

## JavaScript
```js
/* No JavaScript — five custom-property tokens skin the trail; prefers-color-scheme sets the OS default, [data-theme] overrides it manually. Add ~3 lines to persist the choice. */
```

How this works

All colours live as custom properties on the component root: --bc-bg, --bc-text, --bc-accent, --bc-sep, --bc-hover. Dark is the default; a single @media (prefers-color-scheme: light) block reassigns the same tokens, so the trail follows the OS with no script. A manual override rides on top: [data-theme="light"] and [data-theme="dark"] attribute selectors set the tokens explicitly, letting a site's own theme switch win over the OS default. Because every rule reads var(--bc-*), the flip cascades through bar, links, separators and accent in one transition.

The bar itself is a modern SaaS treatment: a translucent fill with backdrop-filter:blur(8px) so it reads as frosted glass over whatever sits behind it, a hairline border from a token, and an accent-tinted current crumb. color-scheme is set on the root so native form controls and scrollbars flip with the theme too. This is exactly how a production design system themes a component — the demo just proves you don't need a JS ThemeProvider for the CSS half.

Make it yours

  • Add brand themes as extra attributes: [data-theme="ocean"] reassigning the same five tokens — the architecture scales to any palette.
  • Persist the manual choice with ~3 lines of JS writing data-theme to the root and localStorage; the CSS never changes.
  • --bc-accent alone recolours the current crumb, hover, and focus ring — one edit rebrands the trail.
  • Drop backdrop-filter for a solid bar if the trail never overlaps content; keep it for sticky dashboard headers.

Gotchas — read before shipping

  • Transition background-color and color specifically — never transition:all, which animates layout during theme flips and looks broken.
  • Set color-scheme on the root so native UI (scrollbars, date pickers) matches; without it they stay stark white in dark mode.
  • backdrop-filter needs something behind it to blur — over a flat page it just looks like a slightly transparent fill; that's expected.
  • Manual [data-theme] must beat the media query — keep its selector specificity ≥ the media-query rule (attribute on the same root element does this naturally).

Browser support

ChromeSafariFirefoxEdge
111+16.2+121+111+

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

prefers-color-scheme + custom properties are universal; backdrop-filter needs Safari's -webkit- prefix (included). oklch() styles the palette only.

Techniques used in this demo

backdrop-filterMDN ↗:has()MDN ↗color-mix()MDN ↗place-items / place-contentMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →