Breadcrumbs

The trail back up the hierarchy. Kobalte's Breadcrumbs wraps your own <ol> and marks the current page with aria-current and data-current, which is what the styling keys on.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`breadcrumbs`	The nav: lays out its ol, and marks the current page
`breadcrumbs-separator`	The character between items

Basic

<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li><a href="#" class="link">Docs</a> <span class="breadcrumbs-separator">/</span></li>
    <li><a href="#" class="link">Components</a> <span class="breadcrumbs-separator">/</span></li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li><a href="#" class="link">Docs</a> <span class="breadcrumbs-separator">/</span></li>
    <li><a href="#" class="link">Components</a> <span class="breadcrumbs-separator">/</span></li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

import { Breadcrumbs } from "@kobalte/core/breadcrumbs";

<Breadcrumbs class="breadcrumbs">
  <ol>
    <li>
      <Breadcrumbs.Link href="/docs" class="link">Docs</Breadcrumbs.Link>
      <Breadcrumbs.Separator class="breadcrumbs-separator" />
    </li>
    <li>
      <Breadcrumbs.Link current>Breadcrumbs</Breadcrumbs.Link>
    </li>
  </ol>
</Breadcrumbs>

<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li><a href="#" class="link">Docs</a> <span class="breadcrumbs-separator" aria-hidden="true">/</span></li>
    <li><a href="#" class="link">Components</a> <span class="breadcrumbs-separator" aria-hidden="true">/</span></li>
    <li><span data-current aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

Kobalte's root is a <nav> with an aria-label and no role, which page landmarks also have, so it takes .breadcrumbs by hand. Everything below it, including the current page, styles itself.