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

E-Commerce Filter & Attribute Breadcrumb Navigation Component

The Shopify/Magento-style faceted-filter trail: Home › Women › Shoes plus removable active-filter chips (Size 8, Under $120, In stock) each with a hover-scaling remove badge. Wraps gracefully on mobile with flex-wrap + gap, mixes navigation crumbs and filter tokens in one accessible bar.

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-04">
  <nav class="bc-04__path" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Women</a></li>
      <li><a href="#" aria-current="page">Shoes</a></li>
    </ol>
  </nav>
  <ul class="bc-04__filters" aria-label="Active filters">
    <li class="bc-04__chip">Size 8<button type="button" aria-label="Remove filter: Size 8"></button></li>
    <li class="bc-04__chip">Under $120<button type="button" aria-label="Remove filter: Under $120"></button></li>
    <li class="bc-04__chip">In stock<button type="button" aria-label="Remove filter: In stock"></button></li>
    <li class="bc-04__chip">Colour: Tan<button type="button" aria-label="Remove filter: Colour Tan"></button></li>
  </ul>
</div>
.bc-04 {
  width: 100%;
  min-height: 100vh;
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 26px;
  background: oklch(0.98 0.004 90);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

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

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

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

.bc-04__path li + li::before {
  content: "›";
  margin: 0 8px;
  color: oklch(0.7 0.02 90);
}

.bc-04__path a {
  padding: 4px 6px;
  border-radius: 6px;
  font: 600 13.5px/1 system-ui,sans-serif;
  color: oklch(0.48 0.04 60);
  text-decoration: none;
  transition: color .15s ease;
}

.bc-04__path a:hover {
  color: oklch(0.55 0.14 45);
}

.bc-04__path a:focus-visible {
  outline: 2px solid oklch(0.55 0.14 45);
  outline-offset: 2px;
}

.bc-04__path li[aria-current="page"] a {
  color: oklch(0.28 0.02 60);
}

.bc-04__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-04__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 13px;
  border-radius: 999px;
  font: 600 12.5px/1 system-ui,sans-serif;
  color: oklch(0.42 0.05 55);
  background: oklch(0.92 0.03 70);
  border: 1px solid oklch(0.86 0.04 65);
  transition: background-color .18s ease,color .18s ease;
}

.bc-04__chip button {
  width: 20px;
  height: 20px;
  flex: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: oklch(0.55 0.05 55);
  -webkit-mask: var(--x) center/13px no-repeat;
  mask: var(--x) center/13px no-repeat;
  transition: transform .15s ease,background-color .18s ease;
}

.bc-04__chip button:hover,
.bc-04__chip button:focus-visible {
  transform: scale(1.15);
  background: oklch(0.55 0.19 25);
  outline: none;
}

.bc-04__chip:has(button:hover),
.bc-04__chip:has(button:focus-visible) {
  background: color-mix(in oklab,oklch(0.6 0.19 25) 15%,oklch(0.92 0.03 70));
  color: oklch(0.45 0.16 25);
}

.bc-04__chip button:focus-visible {
  outline: 2px solid oklch(0.55 0.19 25);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-04__chip,
    .bc-04__chip button {
    transition: none;
  }
}
/* No JavaScript for the UI — nav crumbs in an <ol>, removable facet chips in a <ul>; the × is a mask-image button that inherits colour and scales on hover. Wire removal in your framework. */
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: E-Commerce Filter & Attribute Breadcrumb Navigation Component
Source: https://codefronts.com/navigation/css-breadcrumbs/e-commerce-filter-attribute-breadcrumb-navigation-component/

The Shopify/Magento-style faceted-filter trail: Home › Women › Shoes plus removable active-filter chips (Size 8, Under $120, In stock) each with a hover-scaling remove badge. Wraps gracefully on mobile with flex-wrap + gap, mixes navigation crumbs and filter tokens in one accessible bar.
## HTML
```html
<div class="bc-04">
  <nav class="bc-04__path" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Women</a></li>
      <li><a href="#" aria-current="page">Shoes</a></li>
    </ol>
  </nav>
  <ul class="bc-04__filters" aria-label="Active filters">
    <li class="bc-04__chip">Size 8<button type="button" aria-label="Remove filter: Size 8"></button></li>
    <li class="bc-04__chip">Under $120<button type="button" aria-label="Remove filter: Under $120"></button></li>
    <li class="bc-04__chip">In stock<button type="button" aria-label="Remove filter: In stock"></button></li>
    <li class="bc-04__chip">Colour: Tan<button type="button" aria-label="Remove filter: Colour Tan"></button></li>
  </ul>
</div>
```
## CSS
```css
.bc-04 {
  width: 100%;
  min-height: 100vh;
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 26px;
  background: oklch(0.98 0.004 90);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

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

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

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

.bc-04__path li + li::before {
  content: "›";
  margin: 0 8px;
  color: oklch(0.7 0.02 90);
}

.bc-04__path a {
  padding: 4px 6px;
  border-radius: 6px;
  font: 600 13.5px/1 system-ui,sans-serif;
  color: oklch(0.48 0.04 60);
  text-decoration: none;
  transition: color .15s ease;
}

.bc-04__path a:hover {
  color: oklch(0.55 0.14 45);
}

.bc-04__path a:focus-visible {
  outline: 2px solid oklch(0.55 0.14 45);
  outline-offset: 2px;
}

.bc-04__path li[aria-current="page"] a {
  color: oklch(0.28 0.02 60);
}

.bc-04__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-04__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 13px;
  border-radius: 999px;
  font: 600 12.5px/1 system-ui,sans-serif;
  color: oklch(0.42 0.05 55);
  background: oklch(0.92 0.03 70);
  border: 1px solid oklch(0.86 0.04 65);
  transition: background-color .18s ease,color .18s ease;
}

.bc-04__chip button {
  width: 20px;
  height: 20px;
  flex: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: oklch(0.55 0.05 55);
  -webkit-mask: var(--x) center/13px no-repeat;
  mask: var(--x) center/13px no-repeat;
  transition: transform .15s ease,background-color .18s ease;
}

.bc-04__chip button:hover,
.bc-04__chip button:focus-visible {
  transform: scale(1.15);
  background: oklch(0.55 0.19 25);
  outline: none;
}

.bc-04__chip:has(button:hover),
.bc-04__chip:has(button:focus-visible) {
  background: color-mix(in oklab,oklch(0.6 0.19 25) 15%,oklch(0.92 0.03 70));
  color: oklch(0.45 0.16 25);
}

.bc-04__chip button:focus-visible {
  outline: 2px solid oklch(0.55 0.19 25);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-04__chip,
    .bc-04__chip button {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript for the UI — nav crumbs in an <ol>, removable facet chips in a <ul>; the × is a mask-image button that inherits colour and scales on hover. Wire removal in your framework. */
```

How this works

Two visual languages share one flexbox bar. The left run is a normal <ol> breadcrumb (Home › Women › Shoes) with chevron pseudo-separators. The right run is a list of filter chips — pill-shaped tokens each ending in a real <button> remove control. The whole thing is display:flex;flex-wrap:wrap;gap:8px, so on a narrow phone the chips wrap under the path instead of overflowing, with gap keeping consistent spacing (no margin math to break on wrap).

Each remove badge is a button carrying an SVG × drawn with mask-image so it inherits the chip's text colour automatically (recolour once, everything follows). On :hover/:focus-visible the badge scales with transform:scale(1.15) and the chip tints toward a 'remove' red via color-mix(), previewing the destructive action. The button has an aria-label ("Remove filter: Size 8") so screen-reader users know exactly what each × drops — the visible × alone would be an unlabelled control.

Make it yours

  • Chip colour is one color-mix() base — tint active filters by facet type (size vs price vs brand) by setting a per-chip --chip-hue.
  • Add a 'Clear all' text button at the end of the chip run — same pill styling, no × badge.
  • Swap the × mask for a trash SVG on destructive filters to distinguish 'remove one' from 'clear group'.
  • Wire real removal in your framework by handling the button click; the CSS is behaviour-agnostic.

Gotchas — read before shipping

  • The remove control must be a <button> with an aria-label, never a bare <span>×</span> — otherwise keyboard and screen-reader users can't remove filters.
  • Keep nav crumbs in an <ol> and filter chips in a separate <ul> — they're semantically different (ordered path vs unordered set), and merging them confuses assistive tech.
  • mask-image needs the -webkit- prefix for older Safari (included); without it the × disappears silently.
  • Don't animate chip width on remove in CSS — let your framework unmount; a lingering zero-width chip traps focus.

Browser support

ChromeSafariFirefoxEdge
120+15.4+121+120+

mask-image + :has()-free here so support is wide; color-mix() (2023) is the newest piece. Layout (flex-wrap/gap) works everywhere.

Techniques used in this demo

:has()MDN ↗color-mix()MDN ↗:focus-visibleMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →