Breadcrumb link

Product catalog drill-down: Home → Outdoor → Tents → Alpine 3.

Widely Supported

typographynava11y

Quick implementation

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li + li::before {
  content: "/";
  margin: 0 0.4rem;
  color: color-mix(in oklch, var(--muted) 65%, var(--fg));
}
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 600; }

Prompt this to your LLM

E-commerce and documentation hierarchies.

You are implementing an accessible breadcrumb.

Goal: nav > ol > li structure; slash separators from CSS; last item is plain text with aria-current="page".

Constraints:
- Links use accent color; current page uses fg color, not clickable.
- Separators must not be read as list content by screen readers (use list items only for real crumbs).

Return HTML + CSS for .crumbs.

Why this matters in 2026

Breadcrumbs still orient deep IA; structured markup pairs cleanly with JSON-LD BreadcrumbList.

The logic

li + li::before injects separators without extra DOM nodes.

Accessibility & performance

Use nav with aria-label; ensure focus order follows visual order on wrap.