Breadcrumb trail

nav landmark, ordered list, slash separators, current page without a link.

Widely Supported

uino-js

Quick implementation

nav[aria-label="Breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bc a { color: var(--muted); text-decoration: none; }
.bc [aria-current="page"] { font-weight: 600; color: var(--text); }

Prompt this to your LLM

Use ol, not div soup.

Implement breadcrumbs.

Containers: .breadcrumb-trail-demo, .breadcrumb-trail-card.
nav[aria-label="Breadcrumb"] > ol.bc with li items, links except final crumb which uses span[aria-current="page"].
Slash separators as spans with aria-hidden.

Return HTML + CSS.

Why this matters in 2026

Deep docs sites need wayfinding; breadcrumbs double as structured data when mirrored in JSON-LD.

The logic

Flex-wrap prevents overflow on mobile; ellipsis on anchors keeps long titles from breaking layout.

Accessibility & performance

Screen readers announce list length; the current page should not be a link to itself.