Breadcrumb

A navigation trail. Mark the current page with aria-current="page" on the last item.

Trail

1. Home
2. Components
3. Breadcrumb

Live example

<nav class="re-breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Components</a></li>
    <li><a aria-current="page">Breadcrumb</a></li>
  </ol>
</nav>

Accessibility

• Keyboard — native links: Tab moves to each link, Enter activates it. The current page’s <a> has no href, so it is not focusable or clickable.
• Focus — links show a visible :focus-visible ring (--re-shadow-focus) and have a rounded corner so the ring fits the link.
• Semantics — the <nav aria-label="Breadcrumb"> exposes a landmark named “Breadcrumb”; the <ol> is announced as an ordered list reflecting trail order. The last item carries aria-current="page" so assistive tech announces it as the current page.
• Notes — the / separators are decorative, generated by CSS (li + li::before), so they are never read as content or copied into the accessibility tree. See the accessibility guide.