Breadcrumb

Breadcrumbs show the user’s location in a hierarchy. In Nuxt / PLAI use UBreadcrumb.

Element	Source
Trail structure, separators, current page text	Nuxt UI zinc neutrals
Segment links	CI --ci-color-text-link
Focus ring on links	CI link blue

Live examples

1. Home
2. Cases
3. 12 AR 345/24

HTML

<nav class="ci-breadcrumb" aria-label="Breadcrumb">
  <ol class="ci-breadcrumb__list">
    <li class="ci-breadcrumb__item">
      <a class="ci-breadcrumb__link" href="/">Home</a>
    </li>
    <li class="ci-breadcrumb__item">
      <span class="ci-breadcrumb__current" aria-current="page">Current page</span>
    </li>
  </ol>
</nav>

Accessibility

• Wrap in <nav aria-label="Breadcrumb">.
• Use ordered list (<ol>) for the trail.
• Current page: <span aria-current="page"> — not a link.
• Separator is decorative (/ via CSS); screen readers read list structure.

When to use

• Deep hierarchies (organisation → case → document).
• Skip breadcrumbs on flat top-level pages where a single heading suffices.

Related patterns

• Link — trail segments
• Tabs — sibling sections (not hierarchy)