Clinia UI

Breadcrumb

Shows where the current page sits in the hierarchy, with links back up.

shadcn docs →

When to use

  • Pages two or more levels deep, where users move back up: a source inside a workspace.

When not to use

  • The main navigation: use Sidebar or Navigation Menu.
  • Moving between pages of one list: use Pagination.
  • A flat site one level deep: the page title is enough.

Install

npx shadcn@latest add @clinia/breadcrumb

Anatomy

  1. 1Link[data-slot=breadcrumb-item] atext-muted-foreground · hover:text-foreground
  2. 2Separatordata-slot="breadcrumb-separator"size-3.5 · aria-hidden
  3. 3Current pagedata-slot="breadcrumb-page"text-foreground · aria-current

Clinia rules

  • The last item is BreadcrumbPage, the current page, in text-foreground with no link. Earlier items are links in text-muted-foreground.
  • Each label matches the title of the page it links to.
  • Past four levels, keep the first and the last two, and collapse the middle into BreadcrumbEllipsis.

Do and don't

Do collapse the middle levels of a long trail.
Don't let a long trail wrap onto several lines.

Accessibility

Built in

  • The current page is BreadcrumbPage: a <span> with role="link", aria-disabled="true" and aria-current="page", so a screen reader reads it as the current page in the trail, and it takes no focus and no click.
  • Renders a <nav> landmark labelled breadcrumb, with the trail as an ordered list. aria-label replaces the label.
  • Separators and the ellipsis are hidden from screen readers, so the trail is read as its links alone.

Your responsibility

  • On a page in another language, pass aria-label in that language, such as aria-label="Fil d'Ariane" in French.
  • If the ellipsis hides levels users need, make it a Button that opens a Dropdown Menu of those levels, with an aria-label such as Show hidden levels.
  • Render router links with render={<Link href="/workspaces" />} on BreadcrumbLink.

How to test

  1. Press Tab through the trail: focus moves link by link and skips the current page.
  2. With a screen reader, open the landmarks list: breadcrumb is there. The list is announced with its item count, and the last item as the current page.

API

PropValuesDefaultDescription
aria-label
string
–

Names the navigation landmark for screen readers. Pass it in the page's language, such as "Fil d'Ariane" on a French page.

All other props come from the native nav element.

Related