Modern CSS Breadcrumbs in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">Overflow menu: popover + anchor positioning</span><div class="stage">
<nav class="mbc" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li style="--anchor:--mbc-more">
      <button class="mbc-more" type="button" popovertarget="mbc-more" aria-label="Show 3 more levels">…</button>
      <div class="mbc-pop" id="mbc-more" popover>
        <ul>
          <li><a href="#">Company</a></li>
          <li><a href="#">People</a></li>
          <li><a href="#">Engineering</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Design Systems</a></li>
    <li aria-current="page">Colour tokens</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Sibling switcher on every level</span><div class="stage">
<nav class="mbc" aria-label="Breadcrumb">
  <ol>
    <li style="--anchor:--mbc-org"><a href="#">Acme Cloud</a>
      <button class="mbc-caret" type="button" popovertarget="mbc-org" aria-label="Switch organisation"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></button>
      <div class="mbc-pop" id="mbc-org" popover>
        <p>Organisations</p>
        <ul>
          <li><a href="#" aria-current="true">Acme Cloud</a></li>
          <li><a href="#">Northwind Labs</a></li>
        </ul>
      </div>
    </li>
    <li style="--anchor:--mbc-env"><a href="#">Production</a>
      <button class="mbc-caret" type="button" popovertarget="mbc-env" aria-label="Switch environment"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></button>
      <div class="mbc-pop" id="mbc-env" popover>
        <p>Environments</p>
        <ul>
          <li><a href="#" aria-current="true">Production</a></li>
          <li><a href="#">Staging</a></li>
          <li><a href="#">Development</a></li>
        </ul>
      </div>
    </li>
    <li style="--anchor:--mbc-svc"><a href="#">api-gateway</a>
      <button class="mbc-caret" type="button" popovertarget="mbc-svc" aria-label="Switch service"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></button>
      <div class="mbc-pop" id="mbc-svc" popover>
        <p>Services</p>
        <ul>
          <li><a href="#" aria-current="true">api-gateway</a></li>
          <li><a href="#">billing-worker</a></li>
          <li><a href="#">search-indexer</a></li>
        </ul>
      </div>
    </li>
    <li aria-current="page">Logs</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Trail highlight with :has(), hover or focus a level</span><div class="stage">
<nav class="mbc mbc-trail" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Library</a></li>
    <li><a href="#">Fiction</a></li>
    <li><a href="#">Science fiction</a></li>
    <li><a href="#">Ursula K. Le Guin</a></li>
    <li aria-current="page">The Dispossessed</li>
  </ol>
</nav>
</div></div>

CSS

/* Modern CSS breadcrumbs, no JavaScript:
   - popover="auto" menus (light dismiss, Esc to close) opened by popovertarget buttons,
   - CSS anchor positioning to place each menu under its button (centred panel where unsupported),
   - @starting-style for the entry fade, :has() for the trail highlight. */
.mbc{--mb-link:#57534e;--mb-accent:#c2410c;--mb-current:#1c1917;--mb-sep:#a8a29e;--mb-tint:#fff7ed;--mb-gap:.5rem;
  --mb-chevron:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");
  font-size:.9rem;line-height:1.5}
.mbc ol{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem var(--mb-gap);margin:0;padding:0;list-style:none}
.mbc ol>li{position:relative;display:inline-flex;align-items:center;gap:var(--mb-gap);color:var(--mb-link)}
.mbc ol>li+li::before{content:"";flex:none;width:14px;height:14px;background:var(--mb-sep);mask:var(--mb-chevron) center/contain no-repeat}
.mbc a{color:var(--mb-link);text-decoration:none;border-radius:4px;transition:color .15s}
.mbc a:hover{color:var(--mb-accent)}
.mbc a:focus-visible,.mbc button:focus-visible{outline:2px solid var(--mb-accent);outline-offset:2px}
.mbc [aria-current="page"]{color:var(--mb-current);font-weight:600}

/* trigger buttons: the "…" overflow button and the small caret beside a level */
.mbc-more,.mbc-caret{display:grid;place-items:center;border:0;border-radius:6px;background:#f5f5f4;color:#44403c;cursor:pointer;
  font:inherit;transition:background-color .15s,color .15s}
.mbc-more{width:32px;height:24px;font-weight:700;letter-spacing:.05em}
.mbc-caret{width:22px;height:22px;margin-left:-.3rem;background:none}
.mbc-caret svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s}
.mbc-more:hover,.mbc-caret:hover{background:var(--mb-tint);color:var(--mb-accent)}
.mbc-more:has(+ :popover-open),.mbc-caret:has(+ :popover-open){background:#ffedd5;color:var(--mb-accent)}
.mbc-caret:has(+ :popover-open) svg{rotate:180deg}

/* the menus */
.mbc-pop{width:max-content;min-width:200px;max-width:calc(100vw - 32px);margin:auto;padding:6px;border:1px solid #e7e5e4;border-radius:12px;
  background:#fff;color:var(--mb-link);box-shadow:0 16px 40px -12px rgba(28,25,23,.3);
  opacity:0;translate:0 -4px;transition:opacity .16s,translate .16s,display .16s allow-discrete,overlay .16s allow-discrete}
.mbc-pop:popover-open{opacity:1;translate:0 0}
@starting-style{.mbc-pop:popover-open{opacity:0;translate:0 -4px}}
.mbc-pop p{margin:0;padding:.35rem .7rem .25rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6f6862}
.mbc-pop ul{margin:0;padding:0;list-style:none}
.mbc-pop a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .7rem;border-radius:7px}
.mbc-pop a:hover{background:var(--mb-tint)}
.mbc-pop a[aria-current="true"]{color:var(--mb-current);font-weight:600}
.mbc-pop a[aria-current="true"]::after{content:"";width:14px;height:14px;background:var(--mb-accent);
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3.5 8.5 3 3 6-7'/></svg>") center/contain no-repeat}
/* anchor each menu under its button; --anchor is set per list item */
.mbc-more,.mbc-caret{anchor-name:var(--anchor)}
@supports (anchor-name:--a){
  .mbc-pop{position-anchor:var(--anchor);position-area:bottom span-right;position-try-fallbacks:flip-inline,flip-block;inset:auto;margin:8px 0}
}

/* trail highlight: hovering or focusing a level lights the path from the root up to it */
.mbc-trail ol>li{padding-bottom:6px}
.mbc-trail ol>li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mb-accent);
  scale:0 1;transform-origin:left;transition:scale .25s}
.mbc-trail ol>li+li::after{left:calc(var(--mb-gap) * -1)}
.mbc-trail ol>li:has(a:hover,a:focus-visible)::after,.mbc-trail ol>li:has(~ li a:hover,~ li a:focus-visible)::after{scale:1 1}
.mbc-trail ol>li:has(~ li a:hover,~ li a:focus-visible) a{color:var(--mb-accent)}
@media (prefers-reduced-motion:reduce){.mbc a,.mbc-more,.mbc-caret,.mbc-caret svg,.mbc-pop,.mbc-trail ol>li::after{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">Overflow menu: popover + anchor positioning</span><div class="stage">
<nav class="mbc" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item" style="--anchor:--mbc-more">
      <button class="mbc-more" type="button" popovertarget="mbc-more" aria-label="Show 3 more levels">…</button>
      <div class="mbc-pop dropdown-menu" id="mbc-more" popover>
        <ul class="list-unstyled mb-0">
          <li><a class="dropdown-item" href="#">Company</a></li>
          <li><a class="dropdown-item" href="#">People</a></li>
          <li><a class="dropdown-item" href="#">Engineering</a></li>
        </ul>
      </div>
    </li>
    <li class="breadcrumb-item"><a href="#">Design Systems</a></li>
    <li class="breadcrumb-item active" aria-current="page">Colour tokens</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Sibling switcher on every level</span><div class="stage">
<nav class="mbc" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" style="--anchor:--mbc-org"><a href="#">Acme Cloud</a>
      <button class="mbc-caret" type="button" popovertarget="mbc-org" aria-label="Switch organisation"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></button>
      <div class="mbc-pop dropdown-menu" id="mbc-org" popover>
        <p class="dropdown-header">Organisations</p>
        <ul class="list-unstyled mb-0">
          <li><a class="dropdown-item" href="#" aria-current="true">Acme Cloud</a></li>
          <li><a class="dropdown-item" href="#">Northwind Labs</a></li>
        </ul>
      </div>
    </li>
    <li class="breadcrumb-item" style="--anchor:--mbc-env"><a href="#">Production</a>
      <button class="mbc-caret" type="button" popovertarget="mbc-env" aria-label="Switch environment"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></button>
      <div class="mbc-pop dropdown-menu" id="mbc-env" popover>
        <p class="dropdown-header">Environments</p>
        <ul class="list-unstyled mb-0">
          <li><a class="dropdown-item" href="#" aria-current="true">Production</a></li>
          <li><a class="dropdown-item" href="#">Staging</a></li>
          <li><a class="dropdown-item" href="#">Development</a></li>
        </ul>
      </div>
    </li>
    <li class="breadcrumb-item" style="--anchor:--mbc-svc"><a href="#">api-gateway</a>
      <button class="mbc-caret" type="button" popovertarget="mbc-svc" aria-label="Switch service"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></button>
      <div class="mbc-pop dropdown-menu" id="mbc-svc" popover>
        <p class="dropdown-header">Services</p>
        <ul class="list-unstyled mb-0">
          <li><a class="dropdown-item" href="#" aria-current="true">api-gateway</a></li>
          <li><a class="dropdown-item" href="#">billing-worker</a></li>
          <li><a class="dropdown-item" href="#">search-indexer</a></li>
        </ul>
      </div>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Logs</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Trail highlight with :has(), hover or focus a level</span><div class="stage">
<nav class="mbc mbc-trail" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item"><a href="#">Fiction</a></li>
    <li class="breadcrumb-item"><a href="#">Science fiction</a></li>
    <li class="breadcrumb-item"><a href="#">Ursula K. Le Guin</a></li>
    <li class="breadcrumb-item active" aria-current="page">The Dispossessed</li>
  </ol>
</nav>
</div></div>

CSS

/* Bootstrap .breadcrumb with modern CSS and no JavaScript (the Bootstrap bundle is not needed):
   - popover="auto" menus opened by popovertarget buttons, styled with .dropdown-menu / .dropdown-item,
   - CSS anchor positioning to place each menu under its button (centred panel where unsupported),
   - @starting-style for the entry fade, :has() for the trail highlight.
   The divider is --bs-breadcrumb-divider (inline SVG) with empty alt text where supported. */
.mbc{--bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23a8a29e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");
  --mb-link:#57534e;--mb-accent:#c2410c;--mb-current:#1c1917;--mb-tint:#fff7ed}
.mbc .breadcrumb{--bs-breadcrumb-margin-bottom:0;--bs-breadcrumb-font-size:.9rem;--bs-breadcrumb-item-padding-x:.5rem;
  --bs-breadcrumb-item-active-color:var(--mb-current);align-items:center;row-gap:.3rem;line-height:1.5}
.mbc .breadcrumb-item{position:relative;display:flex;align-items:center;color:var(--mb-link)}
.mbc .breadcrumb-item+.breadcrumb-item::before{display:block;line-height:0}
@supports (content:"x" / ""){.mbc .breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,"/") / ""}}
.mbc .breadcrumb-item.active{color:var(--mb-current);font-weight:600}
.mbc .breadcrumb a{color:var(--mb-link);text-decoration:none;border-radius:4px;transition:color .15s}
.mbc .breadcrumb a:hover{color:var(--mb-accent)}
.mbc a:focus-visible,.mbc button:focus-visible{outline:2px solid var(--mb-accent);outline-offset:2px;box-shadow:none}

/* trigger buttons */
.mbc-more,.mbc-caret{display:grid;place-items:center;border:0;border-radius:6px;background:#f5f5f4;color:#44403c;cursor:pointer;
  transition:background-color .15s,color .15s}
.mbc-more{width:32px;height:24px;font-weight:700;letter-spacing:.05em;line-height:1}
.mbc-caret{width:22px;height:22px;margin-left:.2rem;background:none}
.mbc-caret svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s}
.mbc-more:hover,.mbc-caret:hover{background:var(--mb-tint);color:var(--mb-accent)}
.mbc-more:has(+ :popover-open),.mbc-caret:has(+ :popover-open){background:#ffedd5;color:var(--mb-accent)}
.mbc-caret:has(+ :popover-open) svg{rotate:180deg}

/* the menus: .dropdown-menu as a popover */
.mbc-pop.dropdown-menu{--bs-dropdown-min-width:200px;--bs-dropdown-padding-x:6px;--bs-dropdown-padding-y:6px;--bs-dropdown-font-size:.9rem;
  --bs-dropdown-color:var(--mb-link);--bs-dropdown-border-color:#e7e5e4;--bs-dropdown-border-radius:12px;
  --bs-dropdown-link-color:var(--mb-link);--bs-dropdown-link-hover-color:var(--mb-accent);--bs-dropdown-link-hover-bg:var(--mb-tint);
  --bs-dropdown-link-active-color:var(--mb-accent);--bs-dropdown-link-active-bg:var(--mb-tint);
  --bs-dropdown-item-padding-x:.7rem;--bs-dropdown-item-padding-y:.45rem;--bs-dropdown-item-border-radius:7px;
  --bs-dropdown-header-color:#6f6862;--bs-dropdown-header-padding-x:.7rem;--bs-dropdown-header-padding-y:.35rem;
  position:fixed;width:max-content;max-width:calc(100vw - 32px);margin:auto;box-shadow:0 16px 40px -12px rgba(28,25,23,.3);line-height:1.5;
  opacity:0;translate:0 -4px;transition:opacity .16s,translate .16s,display .16s allow-discrete,overlay .16s allow-discrete}
.mbc-pop.dropdown-menu:popover-open{display:block;opacity:1;translate:0 0}
@starting-style{.mbc-pop.dropdown-menu:popover-open{opacity:0;translate:0 -4px}}
.mbc-pop .dropdown-header{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-bottom:.25rem}
.mbc .mbc-pop .dropdown-item{border-radius:7px}
.mbc-pop .dropdown-item{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mbc-pop .dropdown-item[aria-current="true"]{color:var(--mb-current);font-weight:600}
.mbc-pop .dropdown-item[aria-current="true"]::after{content:"";width:14px;height:14px;background:var(--mb-accent);
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3.5 8.5 3 3 6-7'/></svg>") center/contain no-repeat}
.mbc-more,.mbc-caret{anchor-name:var(--anchor)}
@supports (anchor-name:--a){
  .mbc-pop.dropdown-menu{position-anchor:var(--anchor);position-area:bottom span-right;position-try-fallbacks:flip-inline,flip-block;inset:auto;margin:8px 0}
}

/* trail highlight: hovering or focusing a level lights the path from the root up to it */
.mbc-trail .breadcrumb-item{padding-bottom:6px}
.mbc-trail .breadcrumb-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mb-accent);
  scale:0 1;transform-origin:left;transition:scale .25s}
.mbc-trail .breadcrumb-item:has(a:hover,a:focus-visible)::after,.mbc-trail .breadcrumb-item:has(~ li a:hover,~ li a:focus-visible)::after{scale:1 1}
.mbc-trail .breadcrumb-item:has(~ li a:hover,~ li a:focus-visible) a{color:var(--mb-accent)}
@media (prefers-reduced-motion:reduce){.mbc a,.mbc-more,.mbc-caret,.mbc-caret svg,.mbc-pop.dropdown-menu,.mbc-trail .breadcrumb-item::after{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#655d57] uppercase">Overflow menu: popover + anchor positioning</span><div class="rounded-[14px] border border-[#e7e3de] bg-white px-[22px] py-[18px] shadow-[0_1px_2px_rgba(28,25,23,.04)]">
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-x-2 gap-y-[.3rem] *:relative *:inline-flex *:items-center *:gap-2 [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-[#a8a29e] [&>li+li]:before:sep-chevron">
    <li><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Home</a></li>
    <li>
      <button type="button" popovertarget="mbc-more" aria-label="Show 3 more levels" class="grid h-6 w-8 cursor-pointer place-items-center rounded-md bg-[#f5f5f4] font-bold tracking-[.05em] text-[#44403c] transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] has-[+:popover-open]:bg-[#ffedd5] has-[+:popover-open]:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [anchor-name:--mbc-more]">…</button>
      <div id="mbc-more" popover class="m-auto w-max min-w-[200px] max-w-[calc(100vw-32px)] rounded-xl border border-[#e7e5e4] bg-white p-1.5 text-[.9rem] leading-normal text-[#57534e] shadow-[0_16px_40px_-12px_rgba(28,25,23,.3)] -translate-y-1 opacity-0 transition-[opacity,translate,display,overlay] duration-160 transition-discrete open:translate-y-0 open:opacity-100 starting:open:-translate-y-1 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:mx-0 supports-[anchor-name:--a]:my-2 supports-[anchor-name:--a]:[position-anchor:--mbc-more] supports-[anchor-name:--a]:[position-area:bottom_span-right] supports-[anchor-name:--a]:[position-try-fallbacks:flip-inline,flip-block]">
        <ul>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Company</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">People</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Engineering</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Design Systems</a></li>
    <li aria-current="page" class="font-semibold text-[#1c1917]">Colour tokens</li>
  </ol>
</nav>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#655d57] uppercase">Sibling switcher on every level</span><div class="rounded-[14px] border border-[#e7e3de] bg-white px-[22px] py-[18px] shadow-[0_1px_2px_rgba(28,25,23,.04)]">
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-x-2 gap-y-[.3rem] *:relative *:inline-flex *:items-center *:gap-2 [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-[#a8a29e] [&>li+li]:before:sep-chevron">
    <li><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Acme Cloud</a>
      <button type="button" popovertarget="mbc-org" aria-label="Switch organisation" class="-ml-[.3rem] grid size-[22px] cursor-pointer place-items-center rounded-md text-[#44403c] transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] has-[+:popover-open]:bg-[#ffedd5] has-[+:popover-open]:text-[#c2410c] has-[+:popover-open]:[&>svg]:rotate-180 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [anchor-name:--mbc-org]"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-3.5 fill-none stroke-current stroke-2 transition-[rotate] duration-200 [stroke-linecap:round] [stroke-linejoin:round] motion-reduce:transition-none"><path d="m6 9 6 6 6-6"/></svg></button>
      <div id="mbc-org" popover class="m-auto w-max min-w-[200px] max-w-[calc(100vw-32px)] rounded-xl border border-[#e7e5e4] bg-white p-1.5 text-[.9rem] leading-normal text-[#57534e] shadow-[0_16px_40px_-12px_rgba(28,25,23,.3)] -translate-y-1 opacity-0 transition-[opacity,translate,display,overlay] duration-160 transition-discrete open:translate-y-0 open:opacity-100 starting:open:-translate-y-1 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:mx-0 supports-[anchor-name:--a]:my-2 supports-[anchor-name:--a]:[position-anchor:--mbc-org] supports-[anchor-name:--a]:[position-area:bottom_span-right] supports-[anchor-name:--a]:[position-try-fallbacks:flip-inline,flip-block]">
        <p class="px-[.7rem] pt-[.35rem] pb-1 text-[.7rem] font-semibold tracking-[.08em] text-[#6f6862] uppercase">Organisations</p>
        <ul>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] font-semibold text-[#1c1917] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none after:size-3.5 after:bg-[#c2410c] after:mask-check" aria-current="true">Acme Cloud</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Northwind Labs</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Production</a>
      <button type="button" popovertarget="mbc-env" aria-label="Switch environment" class="-ml-[.3rem] grid size-[22px] cursor-pointer place-items-center rounded-md text-[#44403c] transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] has-[+:popover-open]:bg-[#ffedd5] has-[+:popover-open]:text-[#c2410c] has-[+:popover-open]:[&>svg]:rotate-180 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [anchor-name:--mbc-env]"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-3.5 fill-none stroke-current stroke-2 transition-[rotate] duration-200 [stroke-linecap:round] [stroke-linejoin:round] motion-reduce:transition-none"><path d="m6 9 6 6 6-6"/></svg></button>
      <div id="mbc-env" popover class="m-auto w-max min-w-[200px] max-w-[calc(100vw-32px)] rounded-xl border border-[#e7e5e4] bg-white p-1.5 text-[.9rem] leading-normal text-[#57534e] shadow-[0_16px_40px_-12px_rgba(28,25,23,.3)] -translate-y-1 opacity-0 transition-[opacity,translate,display,overlay] duration-160 transition-discrete open:translate-y-0 open:opacity-100 starting:open:-translate-y-1 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:mx-0 supports-[anchor-name:--a]:my-2 supports-[anchor-name:--a]:[position-anchor:--mbc-env] supports-[anchor-name:--a]:[position-area:bottom_span-right] supports-[anchor-name:--a]:[position-try-fallbacks:flip-inline,flip-block]">
        <p class="px-[.7rem] pt-[.35rem] pb-1 text-[.7rem] font-semibold tracking-[.08em] text-[#6f6862] uppercase">Environments</p>
        <ul>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] font-semibold text-[#1c1917] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none after:size-3.5 after:bg-[#c2410c] after:mask-check" aria-current="true">Production</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Staging</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">Development</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">api-gateway</a>
      <button type="button" popovertarget="mbc-svc" aria-label="Switch service" class="-ml-[.3rem] grid size-[22px] cursor-pointer place-items-center rounded-md text-[#44403c] transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] has-[+:popover-open]:bg-[#ffedd5] has-[+:popover-open]:text-[#c2410c] has-[+:popover-open]:[&>svg]:rotate-180 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [anchor-name:--mbc-svc]"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-3.5 fill-none stroke-current stroke-2 transition-[rotate] duration-200 [stroke-linecap:round] [stroke-linejoin:round] motion-reduce:transition-none"><path d="m6 9 6 6 6-6"/></svg></button>
      <div id="mbc-svc" popover class="m-auto w-max min-w-[200px] max-w-[calc(100vw-32px)] rounded-xl border border-[#e7e5e4] bg-white p-1.5 text-[.9rem] leading-normal text-[#57534e] shadow-[0_16px_40px_-12px_rgba(28,25,23,.3)] -translate-y-1 opacity-0 transition-[opacity,translate,display,overlay] duration-160 transition-discrete open:translate-y-0 open:opacity-100 starting:open:-translate-y-1 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:mx-0 supports-[anchor-name:--a]:my-2 supports-[anchor-name:--a]:[position-anchor:--mbc-svc] supports-[anchor-name:--a]:[position-area:bottom_span-right] supports-[anchor-name:--a]:[position-try-fallbacks:flip-inline,flip-block]">
        <p class="px-[.7rem] pt-[.35rem] pb-1 text-[.7rem] font-semibold tracking-[.08em] text-[#6f6862] uppercase">Services</p>
        <ul>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] font-semibold text-[#1c1917] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none after:size-3.5 after:bg-[#c2410c] after:mask-check" aria-current="true">api-gateway</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">billing-worker</a></li>
          <li><a href="#" class="flex items-center justify-between gap-4 rounded-[7px] px-[.7rem] py-[.45rem] text-[#57534e] no-underline transition-[color,background-color,border-color] hover:bg-[#fff7ed] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none">search-indexer</a></li>
        </ul>
      </div>
    </li>
    <li aria-current="page" class="font-semibold text-[#1c1917]">Logs</li>
  </ol>
</nav>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#655d57] uppercase">Trail highlight with :has(), hover or focus a level</span><div class="rounded-[14px] border border-[#e7e3de] bg-white px-[22px] py-[18px] shadow-[0_1px_2px_rgba(28,25,23,.04)]">
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-x-2 gap-y-[.3rem] *:relative *:inline-flex *:items-center *:gap-2 [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-[#a8a29e] [&>li+li]:before:sep-chevron">
    <li class="after:left-0 pb-1.5 after:absolute after:right-0 after:bottom-0 after:h-0.5 after:origin-left after:scale-x-0 after:bg-[#c2410c] after:transition-transform after:duration-250 motion-reduce:after:transition-none has-[a:hover]:after:scale-x-100 has-[a:focus-visible]:after:scale-x-100 has-[~_li_a:hover]:after:scale-x-100 has-[~_li_a:focus-visible]:after:scale-x-100"><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [li:has(~_li_a:hover)_&]:text-[#c2410c] [li:has(~_li_a:focus-visible)_&]:text-[#c2410c]">Library</a></li>
    <li class="pb-1.5 after:absolute after:right-0 after:bottom-0 after:h-0.5 after:origin-left after:scale-x-0 after:bg-[#c2410c] after:transition-transform after:duration-250 motion-reduce:after:transition-none has-[a:hover]:after:scale-x-100 has-[a:focus-visible]:after:scale-x-100 has-[~_li_a:hover]:after:scale-x-100 has-[~_li_a:focus-visible]:after:scale-x-100 after:-left-2"><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [li:has(~_li_a:hover)_&]:text-[#c2410c] [li:has(~_li_a:focus-visible)_&]:text-[#c2410c]">Fiction</a></li>
    <li class="pb-1.5 after:absolute after:right-0 after:bottom-0 after:h-0.5 after:origin-left after:scale-x-0 after:bg-[#c2410c] after:transition-transform after:duration-250 motion-reduce:after:transition-none has-[a:hover]:after:scale-x-100 has-[a:focus-visible]:after:scale-x-100 has-[~_li_a:hover]:after:scale-x-100 has-[~_li_a:focus-visible]:after:scale-x-100 after:-left-2"><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [li:has(~_li_a:hover)_&]:text-[#c2410c] [li:has(~_li_a:focus-visible)_&]:text-[#c2410c]">Science fiction</a></li>
    <li class="pb-1.5 after:absolute after:right-0 after:bottom-0 after:h-0.5 after:origin-left after:scale-x-0 after:bg-[#c2410c] after:transition-transform after:duration-250 motion-reduce:after:transition-none has-[a:hover]:after:scale-x-100 has-[a:focus-visible]:after:scale-x-100 has-[~_li_a:hover]:after:scale-x-100 has-[~_li_a:focus-visible]:after:scale-x-100 after:-left-2"><a href="#" class="rounded text-[#57534e] no-underline transition-[color,background-color,border-color] hover:text-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] motion-reduce:transition-none [li:has(~_li_a:hover)_&]:text-[#c2410c] [li:has(~_li_a:focus-visible)_&]:text-[#c2410c]">Ursula K. Le Guin</a></li>
    <li aria-current="page" class="pb-1.5 after:absolute after:right-0 after:bottom-0 after:h-0.5 after:origin-left after:scale-x-0 after:bg-[#c2410c] after:transition-transform after:duration-250 motion-reduce:after:transition-none has-[a:hover]:after:scale-x-100 has-[a:focus-visible]:after:scale-x-100 has-[~_li_a:hover]:after:scale-x-100 has-[~_li_a:focus-visible]:after:scale-x-100 after:-left-2 font-semibold text-[#1c1917]">The Dispossessed</li>
  </ol>
</nav>
</div></div>

CSS

/* No JavaScript: popover menus opened by popovertarget buttons, placed with CSS anchor positioning
   (the supports-[anchor-name:--a] classes; a centred panel where unsupported), entry fade via starting:. */
@utility sep-chevron { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>") center / contain no-repeat; }
@utility mask-check { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3.5 8.5 3 3 6-7'/></svg>") center / contain no-repeat; }

About this set

Breadcrumb behaviour that usually needs a dropdown script, done with current CSS and HTML. The overflow menu folds middle levels behind an ellipsis button that opens a popover, and CSS anchor positioning places the menu right under its button, flipping sideways near the viewport edge. The sibling switcher adds a small caret to each level, as in cloud consoles and code editors, which opens a popover listing that level’s siblings, such as other environments or services, with a tick on the current one. The trail highlight uses :has() so hovering or focusing a level lights the path from the root up to it with an orange underline. Popovers give light dismiss, Escape to close and focus order next to the button for free, and @starting-style fades them in. Where anchor positioning is not supported, the menus open as a centred panel and stay usable. There is no JavaScript in any version. The Bootstrap version styles the popovers with .dropdown-menu, .dropdown-header and .dropdown-item without the Bootstrap bundle.

What’s included

Popover menus opened by popovertarget buttons, no JavaScript
CSS anchor positioning with flip fallbacks, centred panel where unsupported
Sibling switcher on each level with the current sibling ticked
Trail highlight built with :has()
Entry fade with @starting-style, removed under reduced motion

Accessibility

The nav is labelled Breadcrumb with aria-current="page" on the last level. The ellipsis and caret buttons have aria-labels such as Show 3 more levels and Switch environment, and browsers expose their expanded state for the popover. Popovers close on Escape or an outside click, and their links follow the button in the tab order. Buttons and links show a 2px orange focus outline, and every transition stops under prefers-reduced-motion.

Customise it

Colours are --mb-link, --mb-accent, --mb-current and --mb-tint on .mbc. Each list item sets --anchor to a unique name that links its button to its menu; change position-area to open the menu elsewhere. In Tailwind edit the [anchor-name] and [position-anchor] classes.

Versions: CSS, Bootstrap 5, Tailwind 4
JavaScript: None
CSS size: 1.7 KB gzipped
Browsers: popover: Chrome 114, Safari 17, Firefox 125. Anchor positioning: Chrome 125, Edge 125, Safari 26; other browsers show a centred menu. @starting-style: Chrome 117, Safari 17.5, Firefox 129. :has(): Chrome 105, Safari 15.4, Firefox 121. The Tailwind CSS 4 version needs Chrome 111, Safari 16.4 or Firefox 128.
Checked: axe-core WCAG 2.1 AA: 0 issues

Visible keyboard focus

Respects reduced motion

No overflow at 375px

All three versions, Sep 25, 2026
Licence: Free, attribution optional

Download the Breadcrumbs pack

Every set in all three versions, one zip.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Breadcrumbs