Open demo

CSS code

HTML 
<div><span class="lbl">Home icon</span><div class="stage">
<nav class="bci" aria-label="Breadcrumb">
  <ol>
    <li><a class="home" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20h5v-6h4v6h5V9.5"/></svg><span class="sr-only">Home</span></a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Security</a></li>
    <li aria-current="page">Two-factor authentication</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Icon on every level</span><div class="stage">
<nav class="bci bci-path" aria-label="Breadcrumb">
  <ol>
    <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 18h10a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.1 9.5 4.25 4.25 0 0 0 7 18z"/></svg>Drive</a></li>
    <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.2h8.7A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>Projects</a></li>
    <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.2h8.7A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>Q3 Launch</a></li>
    <li aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Brief.pdf</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Boxed bar with a count</span>
<nav class="bci bci-bar" aria-label="Breadcrumb">
  <ol>
    <li><a class="home" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 7h12l1 13H5z"/><path d="M9 7a3 3 0 0 1 6 0"/></svg><span class="sr-only">Shop</span></a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Shoes</a></li>
    <li aria-current="page">Trail Running <span class="count">128 items</span></li>
  </ol>
</nav></div>
CSS 
/* Breadcrumbs with icons. Icons are inline SVGs marked aria-hidden; an icon-only link carries
   visually hidden text. Separators are li + li::before painted through a mask (never read aloud). */
.bci{--bi-link:#475569;--bi-hover:#0369a1;--bi-current:#0c4a6e;--bi-sep:#94a3b8;--bi-gap:.5rem;
  --bi-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>");
  --bi-slash: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.6' stroke-linecap='round'><path d='M10.5 2 5.5 14'/></svg>");
  --bi-sep-icon:var(--bi-chevron);font-size:.9rem;line-height:1.5}
.bci ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem var(--bi-gap);margin:0;padding:0;list-style:none}
.bci li{display:inline-flex;align-items:center;gap:var(--bi-gap);color:var(--bi-link)}
.bci li+li::before{content:"";flex:none;width:14px;height:14px;background:var(--bi-sep);mask:var(--bi-sep-icon) center/contain no-repeat}
.bci a{display:inline-flex;align-items:center;gap:.4rem;color:var(--bi-link);text-decoration:none;border-radius:6px;transition:color .15s,background-color .15s}
.bci a:hover{color:var(--bi-hover)}
.bci a:focus-visible{outline:2px solid var(--bi-hover);outline-offset:2px}
.bci svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bci [aria-current="page"]{display:inline-flex;align-items:center;gap:.4rem;color:var(--bi-current);font-weight:600}
.bci .home{padding:5px;margin:-5px;color:#64748b}
.bci .home:hover{background:#e0f2fe;color:var(--bi-hover)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* file path: slash separators, tinted icons */
.bci-path{--bi-sep-icon:var(--bi-slash);--bi-gap:.45rem}
.bci-path svg{color:#0284c7}
.bci-path [aria-current="page"] svg{color:var(--bi-current)}
/* boxed bar: outlined bar, home icon in a tile, count badge on the current level */
.bci-bar ol{padding:5px 14px 5px 5px;background:#fff;border:1px solid #dbe3ec;border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.bci-bar .home{width:36px;height:36px;margin:0;justify-content:center;background:#f0f9ff;color:#0369a1;border-radius:8px}
.bci-bar .home:hover{background:#e0f2fe}
.bci-bar .home svg{width:18px;height:18px}
.bci .count{padding:.1rem .5rem;border-radius:999px;background:#e0f2fe;color:#075985;font-size:.75rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.bci a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Home icon</span><div class="stage">
<nav class="bci" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a class="home" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20h5v-6h4v6h5V9.5"/></svg><span class="visually-hidden">Home</span></a></li>
    <li class="breadcrumb-item"><a href="#">Settings</a></li>
    <li class="breadcrumb-item"><a href="#">Security</a></li>
    <li class="breadcrumb-item active" aria-current="page">Two-factor authentication</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Icon on every level</span><div class="stage">
<nav class="bci bci-path" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 18h10a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.1 9.5 4.25 4.25 0 0 0 7 18z"/></svg>Drive</a></li>
    <li class="breadcrumb-item"><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.2h8.7A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>Projects</a></li>
    <li class="breadcrumb-item"><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.2h8.7A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>Q3 Launch</a></li>
    <li class="breadcrumb-item active" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Brief.pdf</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Boxed bar with a count</span>
<nav class="bci bci-bar" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a class="home" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 7h12l1 13H5z"/><path d="M9 7a3 3 0 0 1 6 0"/></svg><span class="visually-hidden">Shop</span></a></li>
    <li class="breadcrumb-item"><a href="#">Women</a></li>
    <li class="breadcrumb-item"><a href="#">Shoes</a></li>
    <li class="breadcrumb-item active" aria-current="page">Trail Running <span class="badge rounded-pill count">128 items</span></li>
  </ol>
</nav></div>
CSS 
/* Bootstrap .breadcrumb with icons. Separators come from --bs-breadcrumb-divider (inline SVG) and get empty
   alt text where supported; icons are aria-hidden and icon-only links use .visually-hidden text. */
.bci{--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='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");
  --bi-link:#475569;--bi-hover:#0369a1;--bi-current:#0c4a6e}
.bci .breadcrumb{--bs-breadcrumb-margin-bottom:0;--bs-breadcrumb-font-size:.9rem;--bs-breadcrumb-item-padding-x:.5rem;
  --bs-breadcrumb-item-active-color:var(--bi-current);align-items:center;row-gap:.25rem;line-height:1.5}
.bci .breadcrumb-item{display:flex;align-items:center;color:var(--bi-link)}
.bci .breadcrumb-item+.breadcrumb-item::before{display:block;line-height:0}
@supports (content:"x" / ""){.bci .breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,"/") / ""}}
.bci a{display:inline-flex;align-items:center;gap:.4rem;color:var(--bi-link);text-decoration:none;border-radius:6px;transition:color .15s,background-color .15s}
.bci a:hover{color:var(--bi-hover)}
.bci a:focus-visible{outline:2px solid var(--bi-hover);outline-offset:2px}
.bci svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bci .breadcrumb-item.active{color:var(--bi-current);font-weight:600}
.bci .breadcrumb-item.active svg{margin-right:.4rem}
.bci .home{padding:5px;margin:-5px;color:#64748b}
.bci .home:hover{background:#e0f2fe;color:var(--bi-hover)}
/* file path: slash divider, tinted icons */
.bci-path{--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='%2394a3b8' stroke-width='1.6' stroke-linecap='round'><path d='M10.5 2 5.5 14'/></svg>")}
.bci-path .breadcrumb{--bs-breadcrumb-item-padding-x:.45rem}
.bci-path svg{color:#0284c7}
.bci-path .breadcrumb-item.active svg{color:var(--bi-current)}
/* boxed bar: Bootstrap's --bs-breadcrumb-bg and radius, home icon in a tile, .badge for the count */
.bci-bar .breadcrumb{--bs-breadcrumb-bg:#fff;--bs-breadcrumb-border-radius:12px;padding:5px 14px 5px 5px;
  border:1px solid #dbe3ec;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.bci-bar .home{width:36px;height:36px;margin:0;justify-content:center;background:#f0f9ff;color:#0369a1;border-radius:8px}
.bci-bar .home:hover{background:#e0f2fe}
.bci-bar .home svg{width:18px;height:18px}
.bci .count{--bs-badge-padding-x:.5rem;--bs-badge-padding-y:.1rem;--bs-badge-font-size:.75rem;--bs-badge-font-weight:600;
  --bs-badge-color:#075985;margin-left:.4rem;background:#e0f2fe;line-height:1.5}
@media (prefers-reduced-motion:reduce){.bci a{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Home icon</span><div class="rounded-[14px] border border-[#e2e7f0] bg-white px-[22px] py-[18px] shadow-[0_1px_2px_rgba(15,23,42,.04)]">
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-x-2 gap-y-1 *:inline-flex *:items-center *:gap-2 [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-chevron">
    <li><a href="#" class="inline-flex items-center rounded-md -m-[5px] p-[5px] text-[#64748b] no-underline transition-[color,background-color,border-color] hover:bg-[#e0f2fe] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 flex-none fill-none stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20h5v-6h4v6h5V9.5"/></svg><span class="sr-only">Home</span></a></li>
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none">Settings</a></li>
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none">Security</a></li>
    <li aria-current="page" class="font-semibold text-[#0c4a6e]">Two-factor authentication</li>
  </ol>
</nav>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Icon on every level</span><div class="rounded-[14px] border border-[#e2e7f0] bg-white px-[22px] py-[18px] shadow-[0_1px_2px_rgba(15,23,42,.04)]">
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-x-[.45rem] gap-y-1 *:inline-flex *:items-center *:gap-[.45rem] [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-slash">
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 flex-none fill-none stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round] text-[#0284c7]"><path d="M7 18h10a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.1 9.5 4.25 4.25 0 0 0 7 18z"/></svg>Drive</a></li>
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 flex-none fill-none stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round] text-[#0284c7]"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.2h8.7A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>Projects</a></li>
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 flex-none fill-none stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round] text-[#0284c7]"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.2h8.7A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>Q3 Launch</a></li>
    <li aria-current="page" class="gap-[.4rem]! font-semibold text-[#0c4a6e]"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 flex-none fill-none stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Brief.pdf</li>
  </ol>
</nav>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Boxed bar with a count</span>
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-x-2 gap-y-1 *:inline-flex *:items-center *:gap-2 [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-chevron rounded-xl border border-[#dbe3ec] bg-white py-[5px] pr-3.5 pl-[5px] shadow-[0_1px_2px_rgba(15,23,42,.04)]">
    <li><a href="#" class="grid size-9 place-items-center rounded-lg bg-[#f0f9ff] text-[#0369a1] transition-[color,background-color,border-color] hover:bg-[#e0f2fe] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-[18px] flex-none fill-none stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round]"><path d="M6 7h12l1 13H5z"/><path d="M9 7a3 3 0 0 1 6 0"/></svg><span class="sr-only">Shop</span></a></li>
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none">Women</a></li>
    <li><a href="#" class="inline-flex items-center gap-[.4rem] rounded-md text-[#475569] no-underline transition-[color,background-color,border-color] hover:text-[#0369a1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0369a1] motion-reduce:transition-none">Shoes</a></li>
    <li aria-current="page" class="gap-[.4rem]! font-semibold text-[#0c4a6e]">Trail Running <span class="rounded-full bg-[#e0f2fe] px-2 py-[.1rem] text-xs font-semibold text-[#075985]">128 items</span></li>
  </ol>
</nav></div>
CSS 
/* Separator shapes for li + li::before, painted through a mask so nothing is read aloud. */
@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 sep-slash { 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.6' stroke-linecap='round'><path d='M10.5 2 5.5 14'/></svg>") center / contain no-repeat; }

About this set

Three ways to add icons without hurting the text trail. Home icon replaces the first level with a house glyph, the most common pattern in dashboards and account settings. Icon on every level shows a cloud for the drive, folders for each directory and a document for the current file, with slash separators, which fits file browsers and document tools. Boxed bar puts a shopping bag tile at the root of an outlined bar and adds a count badge to the current category, as seen on shop listing pages. Every icon is an inline SVG marked aria-hidden and focusable=”false”, drawn with currentColor so it follows the link colour on hover. The icon-only first level carries visually hidden text, Home or Shop, so it keeps an accessible name and still reads as the first level. The badge sits inside the current item so it is read with the page name. The Bootstrap version uses .visually-hidden and .badge, and the Tailwind version uses sr-only.

What’s included

  • Home icon, icon on every level and boxed bar with a count badge
  • Inline SVG icons drawn in currentColor, no icon font
  • Icon-only links named with visually hidden text
  • Chevron and slash separators hidden from screen readers
  • Bootstrap .visually-hidden and .badge, Tailwind sr-only

Accessibility

The nav is labelled Breadcrumb and wraps an ordered list with aria-current="page" on the last level. Icons are aria-hidden, and the icon-only home link has hidden text so screen readers announce Home or Shop. Links, including the home tile, show a 2px blue focus outline. Colour and background transitions are removed under prefers-reduced-motion.

Customise it

Set --bi-link, --bi-hover and --bi-current on .bci; icon tint lives in .bci-path svg and the tile colours in .bci-bar .home. In Bootstrap the dividers are --bs-breadcrumb-divider SVGs; in Tailwind change the text- colour classes on the links and svg elements.