Open demo

CSS code

HTML 
<span class="lbl">Chevron</span>
<nav aria-label="Breadcrumb">
  <ol class="bc">
    <li><a href="#">Home</a></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><a href="#">Templates</a></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><span aria-current="page">Admin dashboards</span></li>
  </ol>
</nav>

<span class="lbl">Slash</span>
<nav aria-label="Breadcrumb">
  <ol class="bc bc-slash">
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><span aria-current="page">Navigation</span></li>
  </ol>
</nav>

<span class="lbl">Filled trail</span>
<nav aria-label="Breadcrumb">
  <ol class="bc bc-filled">
    <li><a href="#">Home</a></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><a href="#">Account</a></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><span aria-current="page">Billing</span></li>
  </ol>
</nav>

<span class="lbl">Collapsed middle</span>
<nav aria-label="Breadcrumb">
  <ol class="bc">
    <li><a href="#">Home</a></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
      <details class="bc-more"><summary aria-label="Show the rest of the path">…</summary>
        <ul>
          <li><a href="#">Library</a></li>
          <li><a href="#">Marketing</a></li>
          <li><a href="#">Landing pages</a></li>
        </ul>
      </details></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><a href="#">Q3 launch</a></li>
    <li><svg class="bc-sep" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><span aria-current="page">Hero variant B</span></li>
  </ol>
</nav>
CSS 
/* Breadcrumb trails: <nav aria-label="Breadcrumb"> around an ordered list; the last item carries aria-current="page".
   Chevron separators are aria-hidden SVGs; the slash variant draws its separator with CSS. */
.bc{--bc-ink:#101828;--bc-muted:#667085;--bc-sep:#c3c9d5;--bc-hover:#eef0f5;--bc-focus:#4f46e5;
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0;padding:0;list-style:none;font-size:.87rem}
.bc>li{display:flex;align-items:center;gap:2px}
.bc a{padding:5px 8px;border-radius:7px;font-weight:600;color:var(--bc-muted);text-decoration:none}
.bc a:hover{background:var(--bc-hover);color:var(--bc-ink)}
.bc a:focus-visible,.bc summary:focus-visible{outline:2px solid var(--bc-focus);outline-offset:2px}
.bc [aria-current]{padding:5px 8px;color:var(--bc-ink);font-weight:700}
.bc-sep{display:block;width:13px;height:13px;fill:none;stroke:var(--bc-sep);stroke-width:2.4}
/* slash */
.bc-slash>li{gap:0}
.bc-slash>li+li::before{content:"/";margin:0 3px;color:var(--bc-sep)}
/* filled trail */
.bc-filled{gap:0;padding:4px 10px;background:#fff;border:1px solid #e7e9f0;border-radius:999px}
.bc-filled a,.bc-filled [aria-current]{padding:5px 10px}
/* collapsed middle: a <details> disclosure holds the hidden levels */
.bc-more{position:relative;display:inline-flex}
.bc-more summary{list-style:none;padding:5px 9px;border-radius:7px;font-weight:800;letter-spacing:.05em;color:var(--bc-muted);cursor:pointer}
.bc-more summary::-webkit-details-marker{display:none}
.bc-more summary:hover,.bc-more[open] summary{background:var(--bc-hover);color:var(--bc-ink)}
.bc-more ul{position:absolute;top:calc(100% + 6px);left:0;z-index:5;min-width:190px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid #e7e9f0;border-radius:11px;box-shadow:0 16px 34px -20px rgba(16,24,40,.3)}
.bc-more ul a{display:block;padding:8px 11px}
JavaScript 
// The collapsed levels open with a native <details> (click, Enter or Space). This adds what <details> lacks:
// Esc closes it and returns focus to the "…" button, and a click or focus outside closes it.
document.querySelectorAll('.bc-more').forEach(d => {
  const close = () => { d.open = false; };
  d.addEventListener('keydown', e => {
    if (e.key === 'Escape' && d.open) { e.preventDefault(); close(); d.querySelector('summary').focus(); }
  });
  document.addEventListener('click', e => { if (!d.contains(e.target)) close(); });
  d.addEventListener('focusout', e => { if (e.relatedTarget && !d.contains(e.relatedTarget)) close(); });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<span class="lbl">Chevron</span>
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb bc bc-chev">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Templates</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Admin dashboards</span></li>
  </ol>
</nav>

<span class="lbl">Slash</span>
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb bc bc-slash">
    <li class="breadcrumb-item"><a href="#">Docs</a></li>
    <li class="breadcrumb-item"><a href="#">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Navigation</span></li>
  </ol>
</nav>

<span class="lbl">Filled trail</span>
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb bc bc-chev bc-filled">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Account</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Billing</span></li>
  </ol>
</nav>

<span class="lbl">Collapsed middle</span>
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb bc bc-chev">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item dropdown">
      <button class="bc-more" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="Show the rest of the path">…</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Library</a></li>
        <li><a class="dropdown-item" href="#">Marketing</a></li>
        <li><a class="dropdown-item" href="#">Landing pages</a></li>
      </ul>
    </li>
    <li class="breadcrumb-item"><a href="#">Q3 launch</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Hero variant B</span></li>
  </ol>
</nav>
CSS 
/* Bootstrap .breadcrumb, restyled through --bs-breadcrumb-* variables. The divider is Bootstrap's CSS ::before
   (an SVG chevron or "/"); the last item has .active and aria-current="page". */
.bc{--bc-ink:#101828;--bc-muted:#667085;--bc-hover:#eef0f5;--bc-focus:#4f46e5;
  --bs-breadcrumb-margin-bottom:0;--bs-breadcrumb-font-size:.87rem;--bs-breadcrumb-item-padding-x:2px;
  --bs-breadcrumb-divider-color:#c3c9d5;--bs-breadcrumb-item-active-color:var(--bc-ink);align-items:center;row-gap:2px}
.bc-chev{--bs-breadcrumb-divider:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23c3c9d5' stroke-width='2.4'%3e%3cpath d='M9 6l6 6-6 6'/%3e%3c/svg%3e")}
.bc .breadcrumb-item{display:flex;align-items:center}
.bc .breadcrumb-item+.breadcrumb-item::before{float:none;display:block;line-height:0}
.bc-slash .breadcrumb-item+.breadcrumb-item{padding-left:0}
.bc-slash .breadcrumb-item+.breadcrumb-item::before{margin:0 3px;padding:0;line-height:normal}
.bc .breadcrumb-item>a,.bc .breadcrumb-item>span{padding:5px 8px;border-radius:7px}
.bc a{font-weight:600;color:var(--bc-muted);text-decoration:none}
.bc a:hover{background:var(--bc-hover);color:var(--bc-ink)}
.bc .active{font-weight:700}
.bc a:focus-visible,.bc button:focus-visible{outline:2px solid var(--bc-focus);outline-offset:2px;box-shadow:none}
/* filled trail */
.bc-filled{padding:4px 10px;background:#fff;border:1px solid #e7e9f0;border-radius:999px;--bs-breadcrumb-item-padding-x:0}
.bc-filled .breadcrumb-item>a,.bc-filled .breadcrumb-item>span{padding:5px 10px}
/* collapsed middle: a Bootstrap dropdown holds the hidden levels */
.bc-more{padding:5px 9px;border:0;border-radius:7px;background:none;font-weight:800;letter-spacing:.05em;line-height:normal;color:var(--bc-muted)}
.bc-more:hover,.bc-more.show{background:var(--bc-hover);color:var(--bc-ink)}
.bc .dropdown-menu{--bs-dropdown-min-width:190px;--bs-dropdown-padding-x:6px;--bs-dropdown-padding-y:6px;--bs-dropdown-spacer:6px;--bs-dropdown-font-size:.87rem;
  --bs-dropdown-border-color:#e7e9f0;--bs-dropdown-border-radius:11px;--bs-dropdown-box-shadow:0 16px 34px -20px rgba(16,24,40,.3);
  --bs-dropdown-item-padding-x:11px;--bs-dropdown-item-padding-y:8px;--bs-dropdown-item-border-radius:7px;
  --bs-dropdown-link-color:var(--bc-muted);--bs-dropdown-link-hover-color:var(--bc-ink);--bs-dropdown-link-hover-bg:var(--bc-hover);
  --bs-dropdown-link-active-color:var(--bc-ink);--bs-dropdown-link-active-bg:var(--bc-hover);box-shadow:var(--bs-dropdown-box-shadow)}
.bc .dropdown-menu[data-bs-popper]{left:15px}
.bc .dropdown-item{font-weight:600}
.bc .dropdown-item:focus-visible{outline-offset:-2px}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<span class="text-[.72rem] font-bold tracking-[.08em] text-[#5d6679] uppercase">Chevron</span>
<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-0.5 text-[.87rem]">
    <li class="flex items-center gap-0.5"><a href="#" class="rounded-[7px] px-2 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Home</a></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><a href="#" class="rounded-[7px] px-2 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Templates</a></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><span aria-current="page" class="px-2 py-[5px] font-bold text-[#101828]">Admin dashboards</span></li>
  </ol>
</nav>

<span class="text-[.72rem] font-bold tracking-[.08em] text-[#5d6679] uppercase">Slash</span>
<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-0.5 text-[.87rem] [&>li+li]:before:mx-[3px] [&>li+li]:before:text-[#c3c9d5] [&>li+li]:before:content-['/']">
    <li class="flex items-center"><a href="#" class="rounded-[7px] px-2 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Docs</a></li>
    <li class="flex items-center"><a href="#" class="rounded-[7px] px-2 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Components</a></li>
    <li><span aria-current="page" class="px-2 py-[5px] font-bold text-[#101828]">Navigation</span></li>
  </ol>
</nav>

<span class="text-[.72rem] font-bold tracking-[.08em] text-[#5d6679] uppercase">Filled trail</span>
<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center rounded-full border border-[#e7e9f0] bg-white px-2.5 py-1 text-[.87rem]">
    <li class="flex items-center gap-0.5"><a href="#" class="rounded-[7px] px-2.5 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Home</a></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><a href="#" class="rounded-[7px] px-2.5 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Account</a></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><span aria-current="page" class="px-2.5 py-[5px] font-bold text-[#101828]">Billing</span></li>
  </ol>
</nav>

<span class="text-[.72rem] font-bold tracking-[.08em] text-[#5d6679] uppercase">Collapsed middle</span>
<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-0.5 text-[.87rem]">
    <li class="flex items-center gap-0.5"><a href="#" class="rounded-[7px] px-2 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Home</a></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
      <details data-bc-more class="group relative inline-flex"><summary class="cursor-pointer list-none rounded-[7px] px-[9px] py-[5px] font-extrabold tracking-[.05em] text-[#667085] group-open:bg-[#eef0f5] group-open:text-[#101828] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] [&::-webkit-details-marker]:hidden" aria-label="Show the rest of the path">…</summary>
        <ul class="absolute top-[calc(100%+6px)] left-0 z-5 min-w-[190px] rounded-[11px] border border-[#e7e9f0] bg-white p-1.5 shadow-[0_16px_34px_-20px_rgba(16,24,40,.3)]">
          <li><a href="#" class="block rounded-[7px] px-[11px] py-2 font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Library</a></li>
          <li><a href="#" class="block rounded-[7px] px-[11px] py-2 font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Marketing</a></li>
          <li><a href="#" class="block rounded-[7px] px-[11px] py-2 font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Landing pages</a></li>
        </ul>
      </details></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><a href="#" class="rounded-[7px] px-2 py-[5px] font-semibold text-[#667085] hover:bg-[#eef0f5] hover:text-[#101828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Q3 launch</a></li>
    <li class="flex items-center gap-0.5"><svg class="block size-[13px] fill-none stroke-[#c3c9d5] stroke-[2.4]" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg><span aria-current="page" class="px-2 py-[5px] font-bold text-[#101828]">Hero variant B</span></li>
  </ol>
</nav>
JavaScript 
// The collapsed levels open with a native <details> (click, Enter or Space). This adds what <details> lacks:
// Esc closes it and returns focus to the "…" button, and a click or focus outside closes it.
document.querySelectorAll('[data-bc-more]').forEach(d => {
  const close = () => { d.open = false; };
  d.addEventListener('keydown', e => {
    if (e.key === 'Escape' && d.open) { e.preventDefault(); close(); d.querySelector('summary').focus(); }
  });
  document.addEventListener('click', e => { if (!d.contains(e.target)) close(); });
  d.addEventListener('focusout', e => { if (e.relatedTarget && !d.contains(e.relatedTarget)) close(); });
});

About this set

Four breadcrumb trails that show where a page sits in a site. Chevron puts small SVG arrows between the levels. Slash uses a CSS “/” separator for a lighter, docs-style trail. Filled trail wraps the path in a white rounded capsule, which reads well on a grey page header. Collapsed middle keeps the first and last levels visible and folds the rest behind a “…” button that opens a small list of the hidden levels, for deep paths that would otherwise wrap onto several lines. Use the chevron or slash trail above page titles, the capsule inside a toolbar, and the collapsed trail for file browsers and deep documentation. Each trail is an ordered list inside nav aria-label=”Breadcrumb”, and the last item is plain text marked aria-current=”page”. The chevrons are aria-hidden SVGs. The collapsed levels use a native details element, which opens with a click, Enter or Space and works without JavaScript; a short script adds Esc to close it and return focus to the “…” button, and closes it on an outside click or when focus moves away. Every trail wraps instead of overflowing on narrow screens.

What’s included

  • Chevron, slash, filled capsule and collapsed-middle trails
  • Ordered list in nav aria-label="Breadcrumb" with aria-current="page"
  • Chevron separators are aria-hidden SVGs
  • Hidden levels behind a native details disclosure with Esc support
  • Bootstrap version uses .breadcrumb, --bs-breadcrumb-divider and a Dropdown for the hidden levels

Accessibility

Each trail is an ordered list in a nav labelled Breadcrumb, and the current page is text with aria-current="page". The "…" control is named "Show the rest of the path", exposes whether it is expanded, and Esc closes its list and returns focus to it. Links and the button show an indigo :focus-visible outline.

Customise it

Change --bc-ink, --bc-muted, --bc-sep and --bc-hover on .bc. In Bootstrap set --bs-breadcrumb-divider (an SVG data URL or a string such as '/') and --bs-breadcrumb-divider-color on the .breadcrumb; in Tailwind edit the #667085 and #c3c9d5 values.