39 Tailwind CSS Breadcrumbs
04 / 39

All 39 in 39 Tailwind CSS Breadcrumbs

  1. 01Tailwind Accessible Breadcrumb with Schema.org Microdata & ARIA
  2. 02Tailwind Responsive Collapsing Breadcrumb Bar with Container Queries
  3. 03Tailwind Adaptive Light & Dark Mode Breadcrumb Bar with Theme Tokens
  4. 04Tailwind E-Commerce Filter & Facet Breadcrumb with Removable Chips
  5. 05Tailwind Glassmorphism Floating Breadcrumb Pill with Shimmer Sweep
  6. 06Tailwind Neumorphic Soft UI Breadcrumb with Dual Box Shadows
  7. 07Tailwind Sticky Scroll-Shrink Breadcrumb Header with Scroll-Driven Animation
  8. 08Tailwind Material Design Flat Breadcrumb Bar with Ink Ripple
  9. 09Tailwind Isometric 3D Layered Breadcrumb with Extruded Tiles
  10. 10Tailwind Breadcrumb Bar with Built-In Dropdown Sibling Menus
  11. 11Tailwind Full-Width Block-Style Segmented Breadcrumb Bar
  12. 12Tailwind Accent-Colour Toggle Breadcrumb with Persisted Theme
  13. 13Tailwind Seamless Arrow-Cutout Breadcrumb Trail with clip-path
  14. 14Tailwind Compact Icon-Only Home Node Breadcrumb Bar
  15. 15Tailwind Segmented Rounded-Outline Pill Breadcrumb
  16. 16Tailwind Neumorphic Soft Inset-Shadow Breadcrumb Channel
  17. 17Tailwind CSS Grid Auto-Fitting Responsive Breadcrumb Trail
  18. 18Tailwind Holographic Shimmer Web3 Breadcrumb with Animated @property
  19. 19Tailwind SaaS Gradient-Text Breadcrumb Bar with Animated Clip
  20. 20Tailwind Marketplace Filter-Chip Breadcrumb with Icon Chips
  21. 21Tailwind Editorial Breadcrumb with Animated SVG Wave Underline
  22. 22Tailwind Developer Docs Breadcrumb with One-Click Path Copy
  23. 23Tailwind Modern Arrow Breadcrumb Bar using clip-path Polygons
  24. 24Tailwind Multi-Line Aligned Breadcrumb Layout with CSS Subgrid
  25. 25Tailwind Breadcrumb Links with Animated Underline Glow
  26. 26Tailwind Minimalist Breadcrumb with Swappable Masked SVG Separators
  27. 27Tailwind Multi-Step Checkout & Wizard Breadcrumb Indicator
  28. 28Tailwind Ribbon-Style Chevron Breadcrumb Trail
  29. 29Tailwind Pill-Shape Badge Breadcrumb Bar
  30. 30Tailwind Clean Line-Separator Minimalist Breadcrumbs
  31. 31Tailwind Gradient Background Glow Breadcrumb Bar
  32. 32Tailwind Floating Card Shadow Breadcrumb Navigation
  33. 33Tailwind Truncated Ellipsis Compact Mobile Breadcrumb
  34. 34Tailwind Inline Bullet-Dot Separator Breadcrumb
  35. 35Tailwind Skewed Parallelogram Breadcrumb Bar
  36. 36Tailwind Outline Border-Only Geometric Breadcrumbs
  37. 37Tailwind Circular Icon & Numbered Step Breadcrumbs
  38. 38Tailwind Frosted Glass Dark UI Breadcrumb Component
  39. 39Tailwind Micro-Interaction Animated Hover Breadcrumbs
Pure TailwindMIT licensed

Tailwind E-Commerce Filter & Facet Breadcrumb with Removable Chips

The Shopify/Magento faceted trail: Home › Women › Shoes plus removable filter chips, each with its own remove button. The port's interesting move is has-hover: — the chip tints when its remove button is hovered, which the CSS version needed :has(button:hover) for and Tailwind expresses as a variant on the chip itself.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tbc-04 w-full min-h-svh grid place-items-center bg-tbc04-bg font-tbc04-sans px-5 py-9">
  <div class="w-[min(720px,100%)] flex flex-wrap items-center justify-center gap-x-5 gap-y-3">
    <nav aria-label="Breadcrumb">
      <ol class="flex flex-wrap items-center list-none m-0 p-0">
        <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-[13.5px] font-semibold text-tbc04-link no-underline transition-colors duration-150 hover:text-tbc04-acc focus-visible:outline-2 focus-visible:outline-tbc04-acc focus-visible:outline-offset-2">Home</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc04-sep"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-[13.5px] font-semibold text-tbc04-link no-underline transition-colors duration-150 hover:text-tbc04-acc focus-visible:outline-2 focus-visible:outline-tbc04-acc focus-visible:outline-offset-2">Women</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc04-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-1.5 rounded-md text-[13.5px] font-bold text-tbc04-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc04-acc focus-visible:outline-offset-2">Shoes</a></li>
      </ol>
    </nav>
    <ul aria-label="Active filters" class="flex flex-wrap items-center gap-2 list-none m-0 p-0">
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">Size 8<button type="button" aria-label="Remove filter: Size 8" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">Under $120<button type="button" aria-label="Remove filter: Under $120" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">In stock<button type="button" aria-label="Remove filter: In stock" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">Colour: Tan<button type="button" aria-label="Remove filter: Colour Tan" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
    </ul>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tbc04-bg: #fcfcfa;
  --color-tbc04-bg: oklch(0.98 0.004 90);
  --color-tbc04-link: #7c6a52;
  --color-tbc04-link: oklch(0.52 0.04 70);
  --color-tbc04-strong: #3d3428;
  --color-tbc04-strong: oklch(0.32 0.02 70);
  --color-tbc04-sep: #b3ada0;
  --color-tbc04-sep: oklch(0.74 0.02 90);
  --color-tbc04-acc: #b4653a;
  --color-tbc04-acc: oklch(0.55 0.14 45);
  --color-tbc04-chip: #eee2cf;
  --color-tbc04-chip: oklch(0.92 0.03 70);
  --color-tbc04-chipedge: #ded0b8;
  --color-tbc04-chipedge: oklch(0.86 0.04 65);
  --color-tbc04-chipink: #6b5a44;
  --color-tbc04-chipink: oklch(0.46 0.05 55);
  --color-tbc04-xdot: #8b7256;
  --color-tbc04-xdot: oklch(0.55 0.05 55);
  --color-tbc04-danger: #b83a2b;
  --color-tbc04-danger: oklch(0.55 0.19 25);
  --font-tbc04-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Not an @theme entry on purpose: a mask data-URI is not a design-scale value and has no
   business minting utilities. It lives as a plain custom property the mask utilities read. */

.tbc-04 {
  width: 100%;
  min-height: 100svh;
  --tbc04-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");
}
/* Safari < 15.4 mask prefix, which Tailwind's arbitrary mask utilities do not emit. */

.tbc-04 button::before {
  -webkit-mask: var(--tbc04-x) center/13px no-repeat;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tbc04-bg: #fcfcfa;
  --color-tbc04-bg: oklch(0.98 0.004 90);
  --color-tbc04-link: #7c6a52;
  --color-tbc04-link: oklch(0.52 0.04 70);
  --color-tbc04-strong: #3d3428;
  --color-tbc04-strong: oklch(0.32 0.02 70);
  --color-tbc04-sep: #b3ada0;
  --color-tbc04-sep: oklch(0.74 0.02 90);
  --color-tbc04-acc: #b4653a;
  --color-tbc04-acc: oklch(0.55 0.14 45);
  --color-tbc04-chip: #eee2cf;
  --color-tbc04-chip: oklch(0.92 0.03 70);
  --color-tbc04-chipedge: #ded0b8;
  --color-tbc04-chipedge: oklch(0.86 0.04 65);
  --color-tbc04-chipink: #6b5a44;
  --color-tbc04-chipink: oklch(0.46 0.05 55);
  --color-tbc04-xdot: #8b7256;
  --color-tbc04-xdot: oklch(0.55 0.05 55);
  --color-tbc04-danger: #b83a2b;
  --color-tbc04-danger: oklch(0.55 0.19 25);
  --font-tbc04-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Not an @theme entry on purpose: a mask data-URI is not a design-scale value and has no
   business minting utilities. It lives as a plain custom property the mask utilities read. */

.tbc-04 {
  width: 100%;
  min-height: 100svh;
  --tbc04-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");
}
/* Safari < 15.4 mask prefix, which Tailwind's arbitrary mask utilities do not emit. */

.tbc-04 button::before {
  -webkit-mask: var(--tbc04-x) center/13px no-repeat;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • :has(button:hover) on the chip becomes has-hover: plus a has-focus-visible: twin — the CSS original had both too, but as a second selector on a second line; here they are adjacent and obviously parallel.
  • UI change from the CSS original: the remove buttons grew from a 20px hit area to min-w-11 min-h-11, with the visible dot drawn as a before: pseudo-element inside. Same look, 44px target, which is the single most common real-world defect in facet bars.
  • The mask URI deliberately stays out of @theme. In v4 every @theme entry mints utilities, and mask-tbc04-x is not a thing anyone wants.
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 demo 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: Tailwind E-Commerce Filter & Facet Breadcrumb with Removable Chips
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-ecommerce-filter-facet-breadcrumb-removable-chips/

The Shopify/Magento faceted trail: Home &rsaquo; Women &rsaquo; Shoes plus removable filter chips, each with its own remove button. The port's interesting move is has-hover: &mdash; the chip tints when its remove button is hovered, which the CSS version needed :has(button:hover) for and Tailwind expresses as a variant on the chip itself.
## HTML
```html
<section class="tbc-04 w-full min-h-svh grid place-items-center bg-tbc04-bg font-tbc04-sans px-5 py-9">
  <div class="w-[min(720px,100%)] flex flex-wrap items-center justify-center gap-x-5 gap-y-3">
    <nav aria-label="Breadcrumb">
      <ol class="flex flex-wrap items-center list-none m-0 p-0">
        <li class="flex items-center"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-[13.5px] font-semibold text-tbc04-link no-underline transition-colors duration-150 hover:text-tbc04-acc focus-visible:outline-2 focus-visible:outline-tbc04-acc focus-visible:outline-offset-2">Home</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc04-sep"><a href="#" class="flex items-center min-h-9 px-1.5 rounded-md text-[13.5px] font-semibold text-tbc04-link no-underline transition-colors duration-150 hover:text-tbc04-acc focus-visible:outline-2 focus-visible:outline-tbc04-acc focus-visible:outline-offset-2">Women</a></li>
        <li class="flex items-center before:content-['\203A'] before:mx-2 before:text-tbc04-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-1.5 rounded-md text-[13.5px] font-bold text-tbc04-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc04-acc focus-visible:outline-offset-2">Shoes</a></li>
      </ol>
    </nav>
    <ul aria-label="Active filters" class="flex flex-wrap items-center gap-2 list-none m-0 p-0">
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">Size 8<button type="button" aria-label="Remove filter: Size 8" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">Under $120<button type="button" aria-label="Remove filter: Under $120" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">In stock<button type="button" aria-label="Remove filter: In stock" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
      <li class="inline-flex items-center gap-1 pl-3.5 pr-1 rounded-full text-[12.5px] font-semibold text-tbc04-chipink bg-tbc04-chip border border-tbc04-chipedge transition-colors duration-200 has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-hover:text-tbc04-danger has-focus-visible:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] has-focus-visible:text-tbc04-danger motion-reduce:transition-none">Colour: Tan<button type="button" aria-label="Remove filter: Colour Tan" class="grid place-items-center min-w-11 min-h-11 border-0 bg-transparent cursor-pointer before:content-[''] before:w-5 before:h-5 before:rounded-full before:bg-tbc04-xdot before:[mask-image:var(--tbc04-x)] before:[mask-size:13px] before:[mask-position:center] before:[mask-repeat:no-repeat] before:transition-[scale,background-color] before:duration-150 hover:before:scale-115 hover:before:bg-tbc04-danger focus-visible:outline-2 focus-visible:outline-tbc04-danger focus-visible:outline-offset-1 focus-visible:rounded-full motion-reduce:before:transition-none"></button></li>
    </ul>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc04-bg: #fcfcfa;
  --color-tbc04-bg: oklch(0.98 0.004 90);
  --color-tbc04-link: #7c6a52;
  --color-tbc04-link: oklch(0.52 0.04 70);
  --color-tbc04-strong: #3d3428;
  --color-tbc04-strong: oklch(0.32 0.02 70);
  --color-tbc04-sep: #b3ada0;
  --color-tbc04-sep: oklch(0.74 0.02 90);
  --color-tbc04-acc: #b4653a;
  --color-tbc04-acc: oklch(0.55 0.14 45);
  --color-tbc04-chip: #eee2cf;
  --color-tbc04-chip: oklch(0.92 0.03 70);
  --color-tbc04-chipedge: #ded0b8;
  --color-tbc04-chipedge: oklch(0.86 0.04 65);
  --color-tbc04-chipink: #6b5a44;
  --color-tbc04-chipink: oklch(0.46 0.05 55);
  --color-tbc04-xdot: #8b7256;
  --color-tbc04-xdot: oklch(0.55 0.05 55);
  --color-tbc04-danger: #b83a2b;
  --color-tbc04-danger: oklch(0.55 0.19 25);
  --font-tbc04-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Not an @theme entry on purpose: a mask data-URI is not a design-scale value and has no
   business minting utilities. It lives as a plain custom property the mask utilities read. */

.tbc-04 {
  width: 100%;
  min-height: 100svh;
  --tbc04-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");
}
/* Safari < 15.4 mask prefix, which Tailwind's arbitrary mask utilities do not emit. */

.tbc-04 button::before {
  -webkit-mask: var(--tbc04-x) center/13px no-repeat;
}
```

How this works

Two semantics, one bar. The path is an <ol> inside <nav aria-label="Breadcrumb">; the filters are a <ul aria-label="Active filters">. They look like one component and announce as two, which is correct: removing a filter is not navigating up a hierarchy.

The chip reacts to its own button. has-hover:bg-[color-mix(in_oklab,var(--color-tbc04-danger)_15%,var(--color-tbc04-chip))] sits on the <li>, reading the hover state of the button inside it. Pair it with has-focus-visible: and keyboard users get the same warning colour that pointer users get.

The icon is a mask, not an SVG child. One data-URI in a plain custom property, applied through four arbitrary mask utilities. The button's colour comes from bg-*, so hover can swing it to the danger token without touching the shape.

Make it yours

  • Chip palette: --color-tbc04-chip, --color-tbc04-chipedge and --color-tbc04-danger drive every state.
  • Swap the mask URI for a trash or minus glyph — the button geometry does not change.
  • For a "Clear all" control, copy a chip, drop the mask button and give it underline underline-offset-2.

Gotchas — read before shipping

  • Every remove button needs an explicit aria-label naming the filter ("Remove filter: Size 8"); an unlabelled icon button is a WCAG 4.1.2 failure.
  • Mask URIs must be namespaced or shared across demos deliberately — this one lives in --tbc04-x on the root, not in @theme, because it is not a design-scale value and should not mint utilities.
  • has-hover: compiles to :has(:hover), which matches when ANY descendant is hovered — scope it as has-[button:hover]: if a chip ever gains a second interactive child.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() drives the chip warning state (Firefox 121); mask-image needs the -webkit- prefix on older Safari, which the stylesheet ships. Without :has() only the button recolours — still a clear affordance.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗color-mix()tw ↗transitionstw ↗

HTML & JSno Tailwind involved

button elementMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →