COMPONENTS

Breadcrumbs

One breadcrumbs class styles a native navigation landmark and ordered list. Real links lead to ancestor pages; aria-current identifies the current page.

Usage

Markup: nav.breadcrumbs > ol > li

Behaviour: Ancestor links need actual destinations.

Give the navigation a descriptive aria-label, particularly when there are other navigation landmarks.
Keep role="list" on the list to preserve list announcements in browsers that treat list-style:none differently. Decorative separators have no spoken text.
Use actual destination URLs in your application. The documentation examples link to real documentation pages. Theme, typography, size and density inherit; breadcrumbs have no surface requiring glass.

Component API and styling module · Inherited appearance settings

A page trail

The current location is plain text with aria-current; only ancestor pages are links.

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol role="list">
    <li><a href="/RevaCSS/">Home</a></li>
    <li><a href="/RevaCSS/guide/">Guide</a></li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

Wrapping and parent defaults

Long labels wrap. The same logical layout works with the document reading direction.

<section data-size="small" data-density="compact">
  <nav class="breadcrumbs" aria-label="Documentation breadcrumb">
    <ol role="list">
      <li><a href="/RevaCSS/">Documentation home</a></li>
      <li><a href="/RevaCSS/attributes/">Shared component settings and defaults</a></li>
      <li><span aria-current="page">Customising navigation for your project</span></li>
    </ol>
  </nav>
</section>