Breadcrumb

wu-breadcrumb shows the path to the current page. Use a <nav aria-label="Breadcrumb"> around an ordered list, and aria-current="page" on the last item.

Class or attribute	Effect
`wu-breadcrumb`	Root, on `<nav>`. Muted small text
`wu-breadcrumb-list`	Part, on `<ol>`. Wrapping row
`wu-breadcrumb-item`	Part, on `<li>`. A chevron before every item but the first
`wu-breadcrumb-link`	Part. Underlined link, darker on hover, with a focus ring
`aria-current="page"`	The current page, in regular text
`slash`	Slash separators instead of chevrons
`sm`	Extra small text

Default

<nav class="wu-breadcrumb" aria-label="Breadcrumb">
  <ol class="wu-breadcrumb-list">
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">Home</a></li>
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">Projects</a></li>
    <li class="wu-breadcrumb-item"><span aria-current="page">Website redesign</span></li>
  </ol>
</nav>

Slash separators

<nav class="wu-breadcrumb slash" aria-label="Breadcrumb">
  <ol class="wu-breadcrumb-list">
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">Settings</a></li>
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">Team</a></li>
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#" aria-current="page">Members</a></li>
  </ol>
</nav>

Small

<nav class="wu-breadcrumb sm" aria-label="Breadcrumb">
  <ol class="wu-breadcrumb-list">
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">Docs</a></li>
    <li class="wu-breadcrumb-item"><span aria-current="page">Install</span></li>
  </ol>
</nav>

Right to left

The chevron is mirrored in right to left.

<nav class="wu-breadcrumb" aria-label="مسار التنقل">
  <ol class="wu-breadcrumb-list">
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">الرئيسية</a></li>
    <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="#">المشاريع</a></li>
    <li class="wu-breadcrumb-item"><span aria-current="page">التقرير</span></li>
  </ol>
</nav>

@use "@wovenui/components/breadcrumb";

The breadcrumb needs no other component.