39 Tailwind CSS Breadcrumbs
10 / 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 Breadcrumb Bar with Built-In Dropdown Sibling Menus

Power navigation: intermediate crumbs open a dropdown of sibling pages, built on native <details>/<summary> so it is keyboard-ready and script-free. The port reads the disclosure state with open: on the <details> and a direct-child arbitrary variant for the caret — never group-open:, which would match through nested disclosures.

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-10 w-full min-h-svh grid place-items-center bg-tbc10-bg font-tbc10-sans px-8 py-8">
  <nav aria-label="Breadcrumb" class="w-[min(620px,100%)]">
    <ol class="flex flex-wrap items-center list-none m-0 p-0">
      <li class="relative flex items-center"><a href="#" class="flex items-center min-h-9 px-2 rounded-[7px] text-[13.5px] font-semibold text-tbc10-link no-underline transition-colors duration-150 hover:text-tbc10-linkhover hover:bg-tbc10-tint focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2">Home</a></li>
      <li class="relative flex items-center before:content-['\203A'] before:mx-1.5 before:text-tbc10-sep">
        <details open class="[&[open]>summary>svg]:rotate-180">
          <summary class="inline-flex items-center gap-1 min-h-9 px-2 rounded-[7px] list-none cursor-pointer text-[13.5px] font-semibold text-tbc10-link transition-colors duration-150 hover:text-tbc10-linkhover hover:bg-tbc10-tint focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden [&::marker]:content-['']">Guides<svg viewBox="0 0 24 24" aria-hidden="true" class="w-3.25 h-3.25 fill-none stroke-current [stroke-width:2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-[rotate] duration-200 motion-reduce:transition-none"><path d="M6 9l6 6 6-6"/></svg></summary>
          <div role="group" aria-label="Sibling sections" class="absolute top-[calc(100%+6px)] left-0 z-20 flex flex-col min-w-[170px] p-1.5 rounded-xl bg-white border border-tbc10-edge shadow-[0_10px_30px_oklch(0.25_0.05_265/0.14)]">
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Tutorials</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">References</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Recipes</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Changelog</a>
          </div>
        </details>
      </li>
      <li class="relative flex items-center before:content-['\203A'] before:mx-1.5 before:text-tbc10-sep">
        <details class="[&[open]>summary>svg]:rotate-180">
          <summary class="inline-flex items-center gap-1 min-h-9 px-2 rounded-[7px] list-none cursor-pointer text-[13.5px] font-semibold text-tbc10-link transition-colors duration-150 hover:text-tbc10-linkhover hover:bg-tbc10-tint focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden [&::marker]:content-['']">CSS<svg viewBox="0 0 24 24" aria-hidden="true" class="w-3.25 h-3.25 fill-none stroke-current [stroke-width:2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-[rotate] duration-200 motion-reduce:transition-none"><path d="M6 9l6 6 6-6"/></svg></summary>
          <div role="group" aria-label="Sibling sections" class="absolute top-[calc(100%+6px)] left-0 z-20 flex flex-col min-w-[170px] p-1.5 rounded-xl bg-white border border-tbc10-edge shadow-[0_10px_30px_oklch(0.25_0.05_265/0.14)]">
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">HTML</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">JavaScript</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Accessibility</a>
          </div>
        </details>
      </li>
      <li class="relative flex items-center before:content-['\203A'] before:mx-1.5 before:text-tbc10-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-2 rounded-[7px] text-[13.5px] font-bold text-tbc10-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2">Dropdown Breadcrumbs</a></li>
    </ol>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tbc10-bg: #fbfbfd;
  --color-tbc10-bg: oklch(0.98 0.004 265);
  --color-tbc10-edge: #e4e5ec;
  --color-tbc10-edge: oklch(0.9 0.008 265);
  --color-tbc10-tint: #eceef8;
  --color-tbc10-tint: oklch(0.94 0.02 265);
  --color-tbc10-link: #5b64ab;
  --color-tbc10-link: oklch(0.48 0.08 265);
  --color-tbc10-linkhover: #3b4396;
  --color-tbc10-linkhover: oklch(0.36 0.13 265);
  --color-tbc10-menuink: #5a5d68;
  --color-tbc10-menuink: oklch(0.4 0.02 265);
  --color-tbc10-strong: #35383f;
  --color-tbc10-strong: oklch(0.28 0.02 265);
  --color-tbc10-sep: #adb0ba;
  --color-tbc10-sep: oklch(0.72 0.02 265);
  --color-tbc10-acc: #5a68cc;
  --color-tbc10-acc: oklch(0.55 0.15 265);
  --font-tbc10-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-10 {
  width: 100%;
  min-height: 100svh;
}
/* ::details-content has no variant form, and interpolate-size is a property, not a
   utility. The progressive height tween therefore stays CSS. */

.tbc-10 details::details-content {
  height: 0;
  overflow: hidden;
  transition: height .2s ease, content-visibility .2s ease allow-discrete;
  interpolate-size: allow-keywords;
}

.tbc-10 details[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tbc-10 details::details-content {
    transition: none;
  }
}

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-tbc10-bg: #fbfbfd;
  --color-tbc10-bg: oklch(0.98 0.004 265);
  --color-tbc10-edge: #e4e5ec;
  --color-tbc10-edge: oklch(0.9 0.008 265);
  --color-tbc10-tint: #eceef8;
  --color-tbc10-tint: oklch(0.94 0.02 265);
  --color-tbc10-link: #5b64ab;
  --color-tbc10-link: oklch(0.48 0.08 265);
  --color-tbc10-linkhover: #3b4396;
  --color-tbc10-linkhover: oklch(0.36 0.13 265);
  --color-tbc10-menuink: #5a5d68;
  --color-tbc10-menuink: oklch(0.4 0.02 265);
  --color-tbc10-strong: #35383f;
  --color-tbc10-strong: oklch(0.28 0.02 265);
  --color-tbc10-sep: #adb0ba;
  --color-tbc10-sep: oklch(0.72 0.02 265);
  --color-tbc10-acc: #5a68cc;
  --color-tbc10-acc: oklch(0.55 0.15 265);
  --font-tbc10-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-10 {
  width: 100%;
  min-height: 100svh;
}
/* ::details-content has no variant form, and interpolate-size is a property, not a
   utility. The progressive height tween therefore stays CSS. */

.tbc-10 details::details-content {
  height: 0;
  overflow: hidden;
  transition: height .2s ease, content-visibility .2s ease allow-discrete;
  interpolate-size: allow-keywords;
}

.tbc-10 details[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tbc-10 details::details-content {
    transition: none;
  }
}
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&display=swap">

What changed in the port

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

  • [&[open]>summary>svg]:rotate-180 instead of group-open:rotate-180 is the one decision in this demo that matters. The group form matches through every open ancestor, so nested disclosures rotate each other's carets — a bug that only appears once the menu grows a second level.
  • Both marker shims are arbitrary selectors rather than CSS, because they belong to the summary and travel with it when the crumb is copied.
  • UI change from the CSS original: the hover-opens-the-panel media query is dropped. A dropdown that opens on hover and closes on exit is unusable with a trackpad at speed and unreachable on touch; the native click/Enter disclosure is better navigation.
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 Breadcrumb Bar with Built-In Dropdown Sibling Menus
Source: https://codefronts.com/navigation/tailwind-css-breadcrumbs/tailwind-breadcrumb-bar-dropdown-sibling-menus/

Power navigation: intermediate crumbs open a dropdown of sibling pages, built on native <details>/<summary> so it is keyboard-ready and script-free. The port reads the disclosure state with open: on the <details> and a direct-child arbitrary variant for the caret &mdash; never group-open:, which would match through nested disclosures.
## HTML
```html
<section class="tbc-10 w-full min-h-svh grid place-items-center bg-tbc10-bg font-tbc10-sans px-8 py-8">
  <nav aria-label="Breadcrumb" class="w-[min(620px,100%)]">
    <ol class="flex flex-wrap items-center list-none m-0 p-0">
      <li class="relative flex items-center"><a href="#" class="flex items-center min-h-9 px-2 rounded-[7px] text-[13.5px] font-semibold text-tbc10-link no-underline transition-colors duration-150 hover:text-tbc10-linkhover hover:bg-tbc10-tint focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2">Home</a></li>
      <li class="relative flex items-center before:content-['\203A'] before:mx-1.5 before:text-tbc10-sep">
        <details open class="[&[open]>summary>svg]:rotate-180">
          <summary class="inline-flex items-center gap-1 min-h-9 px-2 rounded-[7px] list-none cursor-pointer text-[13.5px] font-semibold text-tbc10-link transition-colors duration-150 hover:text-tbc10-linkhover hover:bg-tbc10-tint focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden [&::marker]:content-['']">Guides<svg viewBox="0 0 24 24" aria-hidden="true" class="w-3.25 h-3.25 fill-none stroke-current [stroke-width:2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-[rotate] duration-200 motion-reduce:transition-none"><path d="M6 9l6 6 6-6"/></svg></summary>
          <div role="group" aria-label="Sibling sections" class="absolute top-[calc(100%+6px)] left-0 z-20 flex flex-col min-w-[170px] p-1.5 rounded-xl bg-white border border-tbc10-edge shadow-[0_10px_30px_oklch(0.25_0.05_265/0.14)]">
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Tutorials</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">References</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Recipes</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Changelog</a>
          </div>
        </details>
      </li>
      <li class="relative flex items-center before:content-['\203A'] before:mx-1.5 before:text-tbc10-sep">
        <details class="[&[open]>summary>svg]:rotate-180">
          <summary class="inline-flex items-center gap-1 min-h-9 px-2 rounded-[7px] list-none cursor-pointer text-[13.5px] font-semibold text-tbc10-link transition-colors duration-150 hover:text-tbc10-linkhover hover:bg-tbc10-tint focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden [&::marker]:content-['']">CSS<svg viewBox="0 0 24 24" aria-hidden="true" class="w-3.25 h-3.25 fill-none stroke-current [stroke-width:2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-[rotate] duration-200 motion-reduce:transition-none"><path d="M6 9l6 6 6-6"/></svg></summary>
          <div role="group" aria-label="Sibling sections" class="absolute top-[calc(100%+6px)] left-0 z-20 flex flex-col min-w-[170px] p-1.5 rounded-xl bg-white border border-tbc10-edge shadow-[0_10px_30px_oklch(0.25_0.05_265/0.14)]">
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">HTML</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">JavaScript</a>
            <a href="#" class="flex items-center min-h-9 px-2.5 rounded-[7px] text-[13.5px] font-medium text-tbc10-menuink no-underline transition-colors duration-150 hover:bg-[color-mix(in_oklab,var(--color-tbc10-acc)_12%,transparent)] hover:text-tbc10-acc focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:-outline-offset-2">Accessibility</a>
          </div>
        </details>
      </li>
      <li class="relative flex items-center before:content-['\203A'] before:mx-1.5 before:text-tbc10-sep"><a href="#" aria-current="page" class="flex items-center min-h-9 px-2 rounded-[7px] text-[13.5px] font-bold text-tbc10-strong no-underline focus-visible:outline-2 focus-visible:outline-tbc10-acc focus-visible:outline-offset-2">Dropdown Breadcrumbs</a></li>
    </ol>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbc10-bg: #fbfbfd;
  --color-tbc10-bg: oklch(0.98 0.004 265);
  --color-tbc10-edge: #e4e5ec;
  --color-tbc10-edge: oklch(0.9 0.008 265);
  --color-tbc10-tint: #eceef8;
  --color-tbc10-tint: oklch(0.94 0.02 265);
  --color-tbc10-link: #5b64ab;
  --color-tbc10-link: oklch(0.48 0.08 265);
  --color-tbc10-linkhover: #3b4396;
  --color-tbc10-linkhover: oklch(0.36 0.13 265);
  --color-tbc10-menuink: #5a5d68;
  --color-tbc10-menuink: oklch(0.4 0.02 265);
  --color-tbc10-strong: #35383f;
  --color-tbc10-strong: oklch(0.28 0.02 265);
  --color-tbc10-sep: #adb0ba;
  --color-tbc10-sep: oklch(0.72 0.02 265);
  --color-tbc10-acc: #5a68cc;
  --color-tbc10-acc: oklch(0.55 0.15 265);
  --font-tbc10-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tbc-10 {
  width: 100%;
  min-height: 100svh;
}
/* ::details-content has no variant form, and interpolate-size is a property, not a
   utility. The progressive height tween therefore stays CSS. */

.tbc-10 details::details-content {
  height: 0;
  overflow: hidden;
  transition: height .2s ease, content-visibility .2s ease allow-discrete;
  interpolate-size: allow-keywords;
}

.tbc-10 details[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tbc-10 details::details-content {
    transition: none;
  }
}
```

How this works

The disclosure stays native. <summary> is focusable, Enter and Space toggle it, and screen readers announce expanded state with no ARIA at all. The port changes only where the styles live: open: variants on the element, the marker shims as arbitrary selectors, and the caret rotation as a direct-child variant.

Why not group-open:. group-open: matches if ANY open ancestor carries group, so a submenu inside an open parent would rotate both carets. [&[open]>summary>svg] binds to this disclosure's own summary and nothing deeper — the same trap the hamburger collection documents on its accordion demo.

Height animation is progressive. ::details-content with interpolate-size:allow-keywords tweens height:0 to auto where supported, and elsewhere the panel simply appears. Both paths stay in the stylesheet, because neither pseudo-element nor interpolate-size has a variant form.

Make it yours

  • Menu width: min-w-[170px] on the panel; drop left-0 for right-0 near the end of a long trail.
  • Accent: --color-tbc10-acc drives focus rings and the menu hover tint.
  • For click-only behaviour, delete nothing — <details> is already click-driven; the CSS collection's hover-open media query is deliberately not ported.

Gotchas — read before shipping

  • Remove BOTH markers: ::-webkit-details-marker for Safari and ::marker for everyone else, or one browser shows a stray triangle.
  • The open panel needs a relative ancestor at the crumb level, not at the list level, or every menu opens from the same left edge.
  • Escape does not close a native <details>. If you need that, it is four lines of JS — the honest cost of keeping the demo script-free.
  • Dropdowns inside a breadcrumb are for wide screens; on mobile the panel can overflow the viewport. Add max-w-[calc(100vw-2rem)] if the trail is deep.

Browser support

ChromeSafariFirefoxEdge
129+not yetnot yet129+

Floor set by oklch(), color-mix(), interpolate-size as this demo is written. The core technique itself goes back further — Chrome 111+.

<details> works everywhere. The height tween needs ::details-content and interpolate-size (Chrome 131+, Safari 18.2+) and degrades to an instant open.

Techniques used in this demo

Utilitiesfirst-class utility or variant

color-mix()tw ↗transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →