Open demo

CSS code

HTML 
<div><span class="lbl">Glass bar</span>
<nav class="dk dk-glass" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Console</a></li>
    <li><a href="#">Clusters</a></li>
    <li><a href="#">eu-north-1</a></li>
    <li aria-current="page">Node pool B</li>
  </ol>
</nav></div>

<div><span class="lbl">Glowing current level</span>
<nav class="dk dk-glow" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Albums</a></li>
    <li><a href="#">Night Drive</a></li>
    <li aria-current="page"><span>Track 04 · Neon Rain</span></li>
  </ol>
</nav></div>

<div><span class="lbl">Dark steps</span>
<nav class="dk dk-steps" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Games</a></li>
    <li><a href="#">Strategy</a></li>
    <li><a href="#">Mods</a></li>
    <li aria-current="page">Map packs</li>
  </ol>
</nav></div>
CSS 
/* Dark breadcrumbs. Separators are li + li::before painted through a mask (no text, never read aloud). */
.dk{--dk-link:#94a3b8;--dk-hover:#f8fafc;--dk-current:#f8fafc;--dk-sep:#475569;--dk-accent:#22d3ee;--dk-gap:.55rem;
  --dk-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>");
  --dk-dot:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='2.2'/></svg>");
  --dk-icon:var(--dk-chevron);font-size:.9rem;line-height:1.5}
.dk ol{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem var(--dk-gap);margin:0;padding:0;list-style:none}
.dk li{display:inline-flex;align-items:center;gap:var(--dk-gap);color:var(--dk-link)}
.dk li+li::before{content:"";flex:none;width:14px;height:14px;background:var(--dk-sep);mask:var(--dk-icon) center/contain no-repeat}
.dk a{color:var(--dk-link);text-decoration:none;border-radius:4px;transition:color .15s}
.dk a:hover{color:var(--dk-hover)}
.dk a:focus-visible{outline:2px solid var(--dk-accent);outline-offset:3px}
.dk [aria-current="page"]{color:var(--dk-current);font-weight:600}
/* glass bar */
.dk-glass ol{padding:.7rem 1.1rem;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.18);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px -12px rgba(0,0,0,.6);backdrop-filter:blur(8px)}
/* glowing current: dot separators, the current level sits in a lit pill */
.dk-glow{--dk-icon:var(--dk-dot);--dk-gap:.4rem}
.dk-glow [aria-current="page"] span{padding:.3rem .8rem;border-radius:999px;background:rgba(34,211,238,.12);color:#67e8f9;
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.4),0 0 18px -2px rgba(34,211,238,.35)}
/* dark steps: clip-path arrows on li::before */
.dk-steps{--dk-tip:12px;font-size:.8125rem;font-weight:600;line-height:1.25}
.dk-steps ol{gap:6px 0;isolation:isolate}
.dk-steps li{position:relative;padding:.6rem calc(var(--dk-tip) + .4rem) .6rem calc(var(--dk-tip) + .55rem);color:#cbd5e1}
.dk-steps li+li{margin-left:calc(3px - var(--dk-tip))}
.dk-steps li:first-child{padding-left:.9rem}
.dk-steps li::before,.dk-steps li+li::before{content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;mask:none;
  background:#1e293b;transition:background-color .15s;
  clip-path:polygon(0 0,calc(100% - var(--dk-tip)) 0,100% 50%,calc(100% - var(--dk-tip)) 100%,0 100%,var(--dk-tip) 50%)}
.dk-steps li:first-child::before{border-radius:8px 0 0 8px;clip-path:polygon(0 0,calc(100% - var(--dk-tip)) 0,100% 50%,calc(100% - var(--dk-tip)) 100%,0 100%)}
.dk-steps li:not([aria-current]):hover::before{background:#2b3a52}
.dk-steps [aria-current="page"]{color:#fff}
.dk-steps [aria-current="page"]::before{background:linear-gradient(90deg,#0e7490,#4338ca)}
.dk-steps a{color:inherit}
.dk-steps a:hover{color:#fff}
.dk-steps a::after{content:"";position:absolute;inset:0}
@media (max-width:420px){
  .dk-steps{--dk-tip:10px;font-size:.75rem}
  .dk-steps li{padding-right:calc(var(--dk-tip) + .25rem);padding-left:calc(var(--dk-tip) + .4rem)}
  .dk-steps li:first-child{padding-left:.7rem}
}
@media (prefers-reduced-motion:reduce){.dk a,.dk-steps li::before,.dk-steps li+li::before{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Glass bar</span>
<nav class="dk dk-glass" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Console</a></li>
    <li class="breadcrumb-item"><a href="#">Clusters</a></li>
    <li class="breadcrumb-item"><a href="#">eu-north-1</a></li>
    <li class="breadcrumb-item active" aria-current="page">Node pool B</li>
  </ol>
</nav></div>

<div><span class="lbl">Glowing current level</span>
<nav class="dk dk-glow" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Studio</a></li>
    <li class="breadcrumb-item"><a href="#">Albums</a></li>
    <li class="breadcrumb-item"><a href="#">Night Drive</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Track 04 · Neon Rain</span></li>
  </ol>
</nav></div>

<div><span class="lbl">Dark steps</span>
<nav class="dk dk-steps" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" class="stretched-link">Games</a></li>
    <li class="breadcrumb-item"><a href="#" class="stretched-link">Strategy</a></li>
    <li class="breadcrumb-item"><a href="#" class="stretched-link">Mods</a></li>
    <li class="breadcrumb-item active" aria-current="page">Map packs</li>
  </ol>
</nav></div>
CSS 
/* Dark Bootstrap breadcrumbs (works with data-bs-theme="dark" too, colours are set explicitly).
   Dividers are --bs-breadcrumb-divider SVGs with empty alt text where supported, so they are not read aloud. */
.dk{--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='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");--dk-link:#94a3b8;--dk-hover:#f8fafc;--dk-accent:#22d3ee}
.dk .breadcrumb{--bs-breadcrumb-margin-bottom:0;--bs-breadcrumb-font-size:.9rem;--bs-breadcrumb-item-padding-x:.55rem;
  --bs-breadcrumb-item-active-color:#f8fafc;align-items:center;row-gap:.3rem;line-height:1.5}
.dk .breadcrumb-item{display:flex;align-items:center;color:var(--dk-link)}
.dk .breadcrumb-item+.breadcrumb-item::before{display:block;line-height:0}
@supports (content:"x" / ""){.dk .breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,"/") / ""}}
.dk .breadcrumb-item.active{color:#f8fafc;font-weight:600}
.dk a{color:var(--dk-link);text-decoration:none;border-radius:4px;transition:color .15s}
.dk a:hover{color:var(--dk-hover)}
.dk a:focus-visible{outline:2px solid var(--dk-accent);outline-offset:3px}
/* glass bar: Bootstrap's own bar variables */
.dk-glass .breadcrumb{--bs-breadcrumb-bg:rgba(255,255,255,.04);--bs-breadcrumb-padding-x:1.1rem;--bs-breadcrumb-padding-y:.7rem;
  --bs-breadcrumb-border-radius:12px;border:1px solid rgba(148,163,184,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px -12px rgba(0,0,0,.6);backdrop-filter:blur(8px)}
/* glowing current */
.dk-glow{--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'><circle cx='8' cy='8' r='2.2' fill='%23475569'/></svg>")}
.dk-glow .breadcrumb{--bs-breadcrumb-item-padding-x:.4rem}
.dk-glow .breadcrumb-item.active span{padding:.3rem .8rem;border-radius:999px;background:rgba(34,211,238,.12);color:#67e8f9;
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.4),0 0 18px -2px rgba(34,211,238,.35)}
/* dark steps: the divider is replaced by a clip-path arrow on ::before; .stretched-link fills the arrow */
.dk-steps{--dk-tip:12px}
.dk-steps .breadcrumb{--bs-breadcrumb-font-size:.8125rem;--bs-breadcrumb-item-padding-x:0;row-gap:6px;font-weight:600;line-height:1.25;isolation:isolate}
.dk-steps .breadcrumb-item{position:relative;display:block;padding:.6rem calc(var(--dk-tip) + .4rem) .6rem calc(var(--dk-tip) + .55rem);color:#cbd5e1}
.dk-steps .breadcrumb-item+.breadcrumb-item{margin-left:calc(3px - var(--dk-tip))}
.dk-steps .breadcrumb-item:first-child{padding-left:.9rem}
.dk-steps .breadcrumb-item::before,.dk-steps .breadcrumb-item+.breadcrumb-item::before{content:"";float:none;padding:0;position:absolute;inset:0;z-index:-1;
  background:#1e293b;transition:background-color .15s;
  clip-path:polygon(0 0,calc(100% - var(--dk-tip)) 0,100% 50%,calc(100% - var(--dk-tip)) 100%,0 100%,var(--dk-tip) 50%)}
.dk-steps .breadcrumb-item:first-child::before{border-radius:8px 0 0 8px;clip-path:polygon(0 0,calc(100% - var(--dk-tip)) 0,100% 50%,calc(100% - var(--dk-tip)) 100%,0 100%)}
.dk-steps .breadcrumb-item:not(.active):hover::before{background:#2b3a52}
.dk-steps .breadcrumb-item.active{color:#fff}
.dk-steps .breadcrumb-item.active::before{background:linear-gradient(90deg,#0e7490,#4338ca)}
.dk-steps a{color:inherit}
.dk-steps a:hover{color:#fff}
@media (max-width:420px){
  .dk-steps{--dk-tip:10px}
  .dk-steps .breadcrumb{--bs-breadcrumb-font-size:.75rem}
  .dk-steps .breadcrumb-item{padding-right:calc(var(--dk-tip) + .25rem);padding-left:calc(var(--dk-tip) + .4rem)}
  .dk-steps .breadcrumb-item:first-child{padding-left:.7rem}
}
@media (prefers-reduced-motion:reduce){.dk a,.dk-steps .breadcrumb-item::before,.dk-steps .breadcrumb-item+.breadcrumb-item::before{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#8b95ab] uppercase">Glass bar</span>
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-y-[.3rem] *:inline-flex *:items-center [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-[#475569] gap-x-[.55rem] *:gap-[.55rem] [&>li+li]:before:sep-chevron rounded-xl border border-[rgba(148,163,184,.18)] bg-white/4 px-[1.1rem] py-[.7rem] shadow-[inset_0_1px_0_rgba(255,255,255,.05),0_10px_30px_-12px_rgba(0,0,0,.6)] backdrop-blur-[8px]">
    <li><a href="#" class="rounded text-[#94a3b8] no-underline transition-[color,background-color,border-color] hover:text-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">Console</a></li>
    <li><a href="#" class="rounded text-[#94a3b8] no-underline transition-[color,background-color,border-color] hover:text-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">Clusters</a></li>
    <li><a href="#" class="rounded text-[#94a3b8] no-underline transition-[color,background-color,border-color] hover:text-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">eu-north-1</a></li>
    <li aria-current="page" class="font-semibold text-[#f8fafc]">Node pool B</li>
  </ol>
</nav></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#8b95ab] uppercase">Glowing current level</span>
<nav aria-label="Breadcrumb" class="text-[.9rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-y-[.3rem] *:inline-flex *:items-center [&>li+li]:before:size-3.5 [&>li+li]:before:flex-none [&>li+li]:before:bg-[#475569] gap-x-[.4rem] *:gap-[.4rem] [&>li+li]:before:sep-dot">
    <li><a href="#" class="rounded text-[#94a3b8] no-underline transition-[color,background-color,border-color] hover:text-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">Studio</a></li>
    <li><a href="#" class="rounded text-[#94a3b8] no-underline transition-[color,background-color,border-color] hover:text-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">Albums</a></li>
    <li><a href="#" class="rounded text-[#94a3b8] no-underline transition-[color,background-color,border-color] hover:text-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">Night Drive</a></li>
    <li aria-current="page" class="font-semibold"><span class="rounded-full bg-[rgba(34,211,238,.12)] px-[.8rem] py-[.3rem] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.4),0_0_18px_-2px_rgba(34,211,238,.35)]">Track 04 · Neon Rain</span></li>
  </ol>
</nav></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#8b95ab] uppercase">Dark steps</span>
<nav aria-label="Breadcrumb" class="[--tip:12px] text-[.8125rem] leading-[1.25] font-semibold max-[420px]:[--tip:10px] max-[420px]:text-xs">
  <ol class="isolate flex flex-wrap gap-y-1.5">
    <li class="relative py-[.6rem] pr-[calc(var(--tip)+.4rem)] max-[420px]:pr-[calc(var(--tip)+.25rem)] before:absolute before:inset-0 before:-z-10 before:transition-[color,background-color,border-color] motion-reduce:before:transition-none pl-[.9rem] max-[420px]:pl-[.7rem] before:clip-arrow-first before:rounded-l-lg text-[#cbd5e1] before:bg-[#1e293b] hover:before:bg-[#2b3a52]"><a href="#" class="rounded text-inherit no-underline after:absolute after:inset-0 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee]">Games</a></li>
    <li class="relative py-[.6rem] pr-[calc(var(--tip)+.4rem)] max-[420px]:pr-[calc(var(--tip)+.25rem)] before:absolute before:inset-0 before:-z-10 before:transition-[color,background-color,border-color] motion-reduce:before:transition-none ml-[calc(3px_-_var(--tip))] pl-[calc(var(--tip)+.55rem)] max-[420px]:pl-[calc(var(--tip)+.4rem)] before:clip-arrow text-[#cbd5e1] before:bg-[#1e293b] hover:before:bg-[#2b3a52]"><a href="#" class="rounded text-inherit no-underline after:absolute after:inset-0 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee]">Strategy</a></li>
    <li class="relative py-[.6rem] pr-[calc(var(--tip)+.4rem)] max-[420px]:pr-[calc(var(--tip)+.25rem)] before:absolute before:inset-0 before:-z-10 before:transition-[color,background-color,border-color] motion-reduce:before:transition-none ml-[calc(3px_-_var(--tip))] pl-[calc(var(--tip)+.55rem)] max-[420px]:pl-[calc(var(--tip)+.4rem)] before:clip-arrow text-[#cbd5e1] before:bg-[#1e293b] hover:before:bg-[#2b3a52]"><a href="#" class="rounded text-inherit no-underline after:absolute after:inset-0 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee]">Mods</a></li>
    <li aria-current="page" class="relative py-[.6rem] pr-[calc(var(--tip)+.4rem)] max-[420px]:pr-[calc(var(--tip)+.25rem)] before:absolute before:inset-0 before:-z-10 before:transition-[color,background-color,border-color] motion-reduce:before:transition-none ml-[calc(3px_-_var(--tip))] pl-[calc(var(--tip)+.55rem)] max-[420px]:pl-[calc(var(--tip)+.4rem)] before:clip-arrow text-white before:bg-linear-90 before:from-[#0e7490] before:to-[#4338ca]">Map packs</li>
  </ol>
</nav></div>
CSS 
/* Separator shapes (painted through a mask on li + li::before, never read aloud) and the arrow shapes for the steps. */
@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-dot { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='2.2'/></svg>") center / contain no-repeat; }
@utility clip-arrow { clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%); }
@utility clip-arrow-first { clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }

About this set

Breadcrumbs tuned for dark interfaces, where a light theme trail turns grey on grey. Glass bar sets the path inside a translucent bar with a hairline border and a backdrop blur, for cloud consoles and developer tools. Glowing current level uses dot separators and lifts the current page into a cyan pill with a soft outer glow, for media and creative apps. Dark steps are slate clip-path arrows that end in a teal to indigo gradient, for game libraries or dashboards that want more presence. Ancestor links are #94a3b8 on a near-black page, the current page is near white, and separators are a darker slate so they recede. Colours are set explicitly rather than relying on a theme, so the set works on any dark page. The steps reuse the clip-path technique from the arrow step set with the link stretched over each arrow. The Bootstrap version runs with data-bs-theme=”dark” and uses –bs-breadcrumb-bg and padding variables for the glass bar.

What’s included

  • Glass bar, glowing current level and dark step variants
  • Text colours checked for 4.5:1 on a near-black page
  • Cyan focus outline that stands out on dark backgrounds
  • Decorative separators that are never read aloud
  • Bootstrap version works with data-bs-theme="dark"

Accessibility

Each breadcrumb is a nav labelled Breadcrumb with an ordered list and aria-current="page" on the last level. Link text is at least 6:1 against the background and the current step text is white on a gradient that stays above 4.5:1. Focus shows a 2px cyan outline. Colour and background transitions are removed under prefers-reduced-motion.

Customise it

Set --dk-link, --dk-hover, --dk-sep and --dk-accent on .dk; the glass, glow and step colours sit in .dk-glass, .dk-glow and .dk-steps. In Bootstrap the dividers are --bs-breadcrumb-divider SVGs; in Tailwind edit the text-, bg- and shadow- classes.