Breadcrumbs

Hierarchy trail leading to the current page, built on React Aria.

import { Breadcrumbs } from "@pockets-ui/components"

Anatomy

Part	Role
`Breadcrumbs.Root`	The `<ol>`. Takes `aria-label`, `isDisabled`, `onAction`.
`Breadcrumbs.Item`	One crumb (`<li>`) — a link plus its trailing separator.
`Breadcrumbs.Link`	The link itself. Omit `href` for the current page.
`Breadcrumbs.Separator`	The divider. Defaults to a chevron; pass children to swap.

When breadcrumbs act as a page's main navigation, wrap the root in <nav aria-label="Breadcrumbs"> to create a navigation landmark — the root renders a list, not a landmark, on its own.

Basic

The final crumb represents the current page, so it takes no href and no trailing separator. React Aria marks it aria-current="page" for you.

Home
Components
Breadcrumbs

Code

import { Breadcrumbs } from "@pockets-ui/components"

export default function BreadcrumbsBasic() {
  return (
    <Breadcrumbs.Root aria-label="Breadcrumbs">
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
        <Breadcrumbs.Separator />
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/components">Components</Breadcrumbs.Link>
        <Breadcrumbs.Separator />
      </Breadcrumbs.Item>
      {/* The last item has no href and no separator — it's the current page. */}
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>Breadcrumbs</Breadcrumbs.Link>
      </Breadcrumbs.Item>
    </Breadcrumbs.Root>
  )
}

Custom separator

pockets
packages
components

Code

import { Breadcrumbs } from "@pockets-ui/components"

export default function BreadcrumbsCustomSeparator() {
  return (
    <Breadcrumbs.Root aria-label="Path">
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/">pockets</Breadcrumbs.Link>
        <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/components">packages</Breadcrumbs.Link>
        <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>components</Breadcrumbs.Link>
      </Breadcrumbs.Item>
    </Breadcrumbs.Root>
  )
}

Disabled

isDisabled on the root disables the whole trail at once.

Home
Components
Breadcrumbs

Code

import { Breadcrumbs } from "@pockets-ui/components"

export default function BreadcrumbsDisabled() {
  return (
    <Breadcrumbs.Root aria-label="Disabled trail" isDisabled>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
        <Breadcrumbs.Separator />
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/components">Components</Breadcrumbs.Link>
        <Breadcrumbs.Separator />
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>Breadcrumbs</Breadcrumbs.Link>
      </Breadcrumbs.Item>
    </Breadcrumbs.Root>
  )
}