Breadcrumb

Shows where the current page sits in the site's hierarchy, as a list of links ending in the current page. Follows the APG breadcrumb pattern: a labelled nav landmark, an ordered list, and aria-current=page on the last item.

WAI-ARIA pattern

Installation

npx nuecrea-ui add breadcrumb

Usage

import * as Breadcrumb from '@/components/ui/breadcrumb';

export default function BreadcrumbStory() {
  return (
    <main className="grid gap-6">
      <Breadcrumb.Root>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#home">
              Home
            </Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator />
          <Breadcrumb.Item>
            <Breadcrumb.Ellipsis />
          </Breadcrumb.Item>
          <Breadcrumb.Separator />
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#components">
              Components
            </Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator>/</Breadcrumb.Separator>
          <Breadcrumb.Item>
            <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Root>
    </main>
  );
}

API reference

Breadcrumb.Root

The navigation landmark. Renders <nav>.

Prop	Type	Default	Description
`aria-label`	`string`	`"Breadcrumb"`	Names the landmark; translate it with the page.

Breadcrumb.List

The ordered list of items and separators. Renders <ol>.

Breadcrumb.Item

One step: holds a Link, the Page or an Ellipsis. Renders <li>.

Breadcrumb.Link

A link to an ancestor page. React: `render={<NextLink href="…" />}` for client routing; Angular: put it on an <a routerLink>. Renders <a>.

Breadcrumb.Page

The current page: plain text with aria-current=page. Renders <span>.

Breadcrumb.Separator

The divider between items, hidden from screen readers. A chevron unless given children. Renders <li> with role presentation.

Breadcrumb.Ellipsis

Marks collapsed items, hidden from screen readers. Three dots unless given children; to make it open a Menu of the hidden pages, put it inside the Menu trigger. Renders <span>.