Open demo

CSS code

HTML 
<div><span class="lbl">Slash, with BreadcrumbList JSON-LD</span><div class="stage">
<nav class="bc" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Guides</a></li>
    <li><a href="#">Photography</a></li>
    <li aria-current="page">Shooting the Night Sky</li>
  </ol>
</nav>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Guides", "item": "https://example.com/guides/" },
    { "@type": "ListItem", "position": 3, "name": "Photography", "item": "https://example.com/guides/photography/" },
    { "@type": "ListItem", "position": 4, "name": "Shooting the Night Sky" }
  ]
}
</script>
</div></div>

<div><span class="lbl">Chevron</span><div class="stage">
<nav class="bc bc-chevron" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Store</a></li>
    <li><a href="#">Kitchen</a></li>
    <li><a href="#">Cookware</a></li>
    <li aria-current="page">Cast Iron Skillet, 26 cm</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Arrow</span><div class="stage">
<nav class="bc bc-arrow" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Harbor Bridge Retrofit</a></li>
    <li aria-current="page">Budget</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Dot, small caps</span><div class="stage">
<nav class="bc bc-dot" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Journal</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Portugal</a></li>
    <li aria-current="page">Three Days in Porto</li>
  </ol>
</nav>
</div></div>
CSS 
/* Classic breadcrumbs: nav > ol. Each separator is li + li::before painted through a CSS mask,
   so it has no text content and screen readers do not read it. Swap --bc-icon to change the shape. */
.bc{--bc-link:#475569;--bc-hover:#4338ca;--bc-current:#0f172a;--bc-sep:#94a3b8;--bc-gap:.55rem;
  --bc-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>");
  --bc-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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");
  --bc-arrow: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' stroke-linejoin='round'><path d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/></svg>");
  --bc-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>");
  --bc-icon:var(--bc-slash);
  font-size:.95rem;line-height:1.5}
.bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem var(--bc-gap);margin:0;padding:0;list-style:none}
.bc li{display:inline-flex;align-items:center;gap:var(--bc-gap);color:var(--bc-link)}
.bc li+li::before{content:"";flex:none;width:1em;height:1em;background:var(--bc-sep);
  mask:var(--bc-icon) center/contain no-repeat}
.bc a{color:var(--bc-link);text-decoration:none;border-radius:4px;transition:color .15s}
.bc a:hover{color:var(--bc-hover);text-decoration:underline;text-underline-offset:3px}
.bc a:focus-visible{outline:2px solid var(--bc-hover);outline-offset:3px}
.bc [aria-current="page"]{color:var(--bc-current);font-weight:600}
/* separator shapes */
.bc-chevron{--bc-icon:var(--bc-chevron)}
.bc-arrow{--bc-icon:var(--bc-arrow);--bc-link:#4338ca;--bc-hover:#312e81;--bc-gap:.5rem}
.bc-arrow li+li::before{background:#818cf8}
.bc-dot{--bc-icon:var(--bc-dot);--bc-gap:.35rem;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.bc a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Slash, with BreadcrumbList JSON-LD</span><div class="stage">
<nav class="bc" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Guides</a></li>
    <li class="breadcrumb-item"><a href="#">Photography</a></li>
    <li class="breadcrumb-item active" aria-current="page">Shooting the Night Sky</li>
  </ol>
</nav>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Guides", "item": "https://example.com/guides/" },
    { "@type": "ListItem", "position": 3, "name": "Photography", "item": "https://example.com/guides/photography/" },
    { "@type": "ListItem", "position": 4, "name": "Shooting the Night Sky" }
  ]
}
</script>
</div></div>

<div><span class="lbl">Chevron</span><div class="stage">
<nav class="bc bc-chevron" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Store</a></li>
    <li class="breadcrumb-item"><a href="#">Kitchen</a></li>
    <li class="breadcrumb-item"><a href="#">Cookware</a></li>
    <li class="breadcrumb-item active" aria-current="page">Cast Iron Skillet, 26 cm</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Arrow</span><div class="stage">
<nav class="bc bc-arrow" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="#">Projects</a></li>
    <li class="breadcrumb-item"><a href="#">Harbor Bridge Retrofit</a></li>
    <li class="breadcrumb-item active" aria-current="page">Budget</li>
  </ol>
</nav>
</div></div>

<div><span class="lbl">Dot, small caps</span><div class="stage">
<nav class="bc bc-dot" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Journal</a></li>
    <li class="breadcrumb-item"><a href="#">Travel</a></li>
    <li class="breadcrumb-item"><a href="#">Portugal</a></li>
    <li class="breadcrumb-item active" aria-current="page">Three Days in Porto</li>
  </ol>
</nav>
</div></div>
CSS 
/* Bootstrap .breadcrumb with the divider set through --bs-breadcrumb-divider (an inline SVG).
   The @supports rule gives the divider empty alt text, so screen readers skip it. */
.bc{--bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' 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>");
  --bc-link:#475569;--bc-hover:#4338ca}
.bc .breadcrumb{--bs-breadcrumb-margin-bottom:0;--bs-breadcrumb-font-size:.95rem;--bs-breadcrumb-item-padding-x:.55rem;
  --bs-breadcrumb-item-active-color:#0f172a;row-gap:.2rem;line-height:1.5}
.bc .breadcrumb-item{display:flex;align-items:center}
.bc .breadcrumb-item.active{font-weight:600}
.bc a{color:var(--bc-link);text-decoration:none;border-radius:4px;transition:color .15s}
.bc a:hover{color:var(--bc-hover);text-decoration:underline;text-underline-offset:3px}
.bc a:focus-visible{outline:2px solid var(--bc-hover);outline-offset:3px}
.bc .breadcrumb-item+.breadcrumb-item::before{display:block;line-height:0}
@supports (content:"x" / ""){.bc .breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,"/") / ""}}
/* separator shapes */
.bc-chevron{--bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>")}
.bc-arrow{--bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23818cf8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/></svg>");
  --bc-link:#4338ca;--bc-hover:#312e81}
.bc-arrow .breadcrumb{--bs-breadcrumb-item-padding-x:.5rem}
.bc-dot{--bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='2 2 12 12'><circle cx='8' cy='8' r='1.65' fill='%2394a3b8'/></svg>")}
.bc-dot .breadcrumb{--bs-breadcrumb-font-size:.75rem;--bs-breadcrumb-item-padding-x:.35rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.bc a{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Slash, with BreadcrumbList JSON-LD</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-[.95rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-y-[.2rem] *:inline-flex *:items-center [&>li+li]:before:size-[1em] [&>li+li]:before:flex-none gap-x-[.55rem] *:gap-[.55rem] [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-slash">
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Home</a></li>
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Guides</a></li>
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Photography</a></li>
    <li aria-current="page" class="font-semibold text-slate-900">Shooting the Night Sky</li>
  </ol>
</nav>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Guides", "item": "https://example.com/guides/" },
    { "@type": "ListItem", "position": 3, "name": "Photography", "item": "https://example.com/guides/photography/" },
    { "@type": "ListItem", "position": 4, "name": "Shooting the Night Sky" }
  ]
}
</script>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Chevron</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-[.95rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-y-[.2rem] *:inline-flex *:items-center [&>li+li]:before:size-[1em] [&>li+li]:before:flex-none gap-x-[.55rem] *:gap-[.55rem] [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-chevron">
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Store</a></li>
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Kitchen</a></li>
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Cookware</a></li>
    <li aria-current="page" class="font-semibold text-slate-900">Cast Iron Skillet, 26 cm</li>
  </ol>
</nav>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Arrow</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-[.95rem] leading-normal">
  <ol class="flex flex-wrap items-center gap-y-[.2rem] *:inline-flex *:items-center [&>li+li]:before:size-[1em] [&>li+li]:before:flex-none gap-x-2 *:gap-2 [&>li+li]:before:bg-indigo-400 [&>li+li]:before:sep-arrow">
    <li><a href="#" class="rounded text-indigo-700 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-900 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-900 motion-reduce:transition-none">Dashboard</a></li>
    <li><a href="#" class="rounded text-indigo-700 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-900 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-900 motion-reduce:transition-none">Projects</a></li>
    <li><a href="#" class="rounded text-indigo-700 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-900 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-900 motion-reduce:transition-none">Harbor Bridge Retrofit</a></li>
    <li aria-current="page" class="font-semibold text-slate-900">Budget</li>
  </ol>
</nav>
</div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Dot, small caps</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-[.75rem] leading-normal font-semibold tracking-[.1em] uppercase">
  <ol class="flex flex-wrap items-center gap-y-[.2rem] *:inline-flex *:items-center [&>li+li]:before:size-[1em] [&>li+li]:before:flex-none gap-x-[.35rem] *:gap-[.35rem] [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-dot">
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Journal</a></li>
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Travel</a></li>
    <li><a href="#" class="rounded text-slate-600 no-underline transition-[color,background-color,border-color] duration-150 hover:text-indigo-700 hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-indigo-700 motion-reduce:transition-none">Portugal</a></li>
    <li aria-current="page" class="font-semibold text-slate-900">Three Days in Porto</li>
  </ol>
</nav>
</div></div>
CSS 
/* Separator shapes, painted through a mask on li + li::before so nothing is read aloud. */
@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; }
@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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>") center / contain no-repeat; }
@utility sep-arrow { 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' stroke-linejoin='round'><path d='M3 8h10M9.5 4.5 13 8l-3.5 3.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; }

About this set

The four separator styles most sites use, each on a white bar: a thin slash, a chevron, an arrow with indigo links, and a small dot with compact uppercase labels for editorial layouts. Pick the slash or chevron as a default, the arrow when the path reads as a sequence of places inside an app, and the dot where the breadcrumb sits above a headline and should stay quiet. Every breadcrumb is a nav element labelled Breadcrumb that wraps an ordered list, and the last item carries aria-current=”page” instead of a link. The separators are drawn by li + li::before with a CSS mask, so they are pure decoration with no text for a screen reader to announce, and changing one custom property swaps the shape. The slash example also ships a BreadcrumbList JSON-LD script with the same four levels, positions and URLs. That structured data is what lets Google show the path in place of the raw URL in search results, and it should always match the visible trail. The Bootstrap version is the stock .breadcrumb with each shape passed through –bs-breadcrumb-divider as an inline SVG.

What’s included

  • Slash, chevron, arrow and dot separators from one set of rules
  • Separators painted with a CSS mask, so they are never read aloud
  • BreadcrumbList JSON-LD example that mirrors the visible path
  • Bootstrap version uses --bs-breadcrumb-divider with inline SVG dividers
  • Last item marked with aria-current="page"

Accessibility

Each breadcrumb is a nav with aria-label="Breadcrumb" around an ordered list, so screen readers announce a breadcrumb landmark and the number of levels. The current page is plain text with aria-current="page". Separators have no text content; in the Bootstrap version they get empty alt text through the content property. Links show a 2px indigo focus outline, and the colour transition is removed under prefers-reduced-motion.

Customise it

In plain CSS set --bc-link, --bc-hover, --bc-current and --bc-sep on .bc, and --bc-icon to pick the separator shape. In Bootstrap change --bs-breadcrumb-divider and the --bs-breadcrumb-* variables on .breadcrumb; in Tailwind swap the sep-* utility and the text- colour classes.