Breadcrumb Trail

Navigation breadcrumbs with ::before arrow separators using CSS content.

Published June 4, 2026

Demo

HTML
				
				<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li>Current Page</li>
  </ol>
</nav>

			

CSS
				
				ol { display: flex; list-style: none; }

li + li::before {
  content: "/";
  color: var(--text-muted);
  margin: 0 .5rem;
}

/* Arrow variant */
.bc-arrow li + li::before { content: "›"; }

/* Chevron with CSS border trick */
.bc-chevron li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--text-muted);
  border-right: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
}

			

How it works

Breadcrumbs are an <ol> list styled as a horizontal trail. The separator between items is injected using li + li::before — the adjacent sibling combinator selects every <li> that immediately follows another. The content property can be any character, string, or even an SVG. No JavaScript or extra HTML needed for the separators.