Breadcrumb navigation

Quick implementation

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline: 0.5rem;
  color: oklch(0.65 0.02 260);
}

.breadcrumb a {
  color: oklch(0.5 0.15 260);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb [aria-current="page"] {
  color: oklch(0.35 0 0);
  font-weight: 600;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to generate a breadcrumb component.

Create a breadcrumb navigation using an ordered list inside a nav element
with aria-label="Breadcrumb". Style the ol with display: flex, flex-wrap: wrap,
and no list-style. Add "/" separators using li + li::before with
margin-inline: 0.5rem. Links use oklch(0.5 0.15 260), and the current
page (marked with aria-current="page") uses a darker color with
font-weight 600. Use oklch() for all colors. Include hover underline
with text-underline-offset: 2px.

Why this matters

Breadcrumbs help users understand their position in a site hierarchy and navigate back to parent pages. They reduce the number of actions needed to reach a higher-level page, improve discoverability, and are a strong signal for search engines (Google often displays them in search results). A pure CSS implementation keeps them lightweight and dependency-free.

The logic

The li + li::before adjacent sibling selector adds a separator before every list item except the first. This is cleaner than adding separator elements to the HTML or using :not(:first-child). flex-wrap: wrap ensures the breadcrumb wraps gracefully on narrow screens rather than overflowing. margin-inline provides equal spacing on both sides of the separator in a writing-direction-aware way. The current page uses a <span> instead of a link — there is no reason to link to the page you are already on.

Accessibility & performance

Wrap the breadcrumb in a <nav> with aria-label="Breadcrumb" so screen readers identify it as a navigation landmark. Use an <ol> (ordered list) — the order of items is meaningful. Mark the current page with aria-current="page" so assistive technology announces it as the current location. The CSS ::before separators are decorative and not read by most screen readers, which is the desired behavior — the list structure already conveys hierarchy.