Breadcrumbs

navigation

Ordered navigation trail for hierarchical pages. The final item is rendered as the current page while previous items remain links.

Preview

Scale1.00

Section trail

Nested record

Usage

import { Breadcrumbs } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components' },
    { label: 'Breadcrumbs' },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	required	Trail items. The final item is current.
`item.label`	`JSX.Element`	required	Visible crumb label.
`item.href`	`string`	--	Link target for non-current crumbs.
`aria-label`	`string`	`'Breadcrumb'`	Accessible label for the navigation landmark.
`class`	`string`	--	Additional classes on the `<nav>`.

Accessibility

Landmark: Renders <nav aria-label="Breadcrumb">.
Structure: Uses an ordered list so assistive technology can announce the trail length and order.
Current page: The final item receives aria-current="page" and is not a link.
Focus: Linked crumbs use the shared visible focus ring.

Do / Don't

Do

Use breadcrumbs on nested pages where the parent path helps users recover context.

Don't

Don't use breadcrumbs as the only navigation. They supplement the primary nav, not replace it.