Breadcrumb

A navigation aid showing the user’s location within a page hierarchy. Uses semantic HTML (<nav>, <ol>, <li>) with proper ARIA attributes.

Import


import { Breadcrumb } from "chunks-ui";

Basic Usage


<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/collections">Collections</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Citadel Base White</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Use Breadcrumb.Ellipsis to indicate hidden intermediate levels:


<Breadcrumb.Item>
  <Breadcrumb.Ellipsis />
</Breadcrumb.Item>

Custom Separator

Pass children to Breadcrumb.Separator to replace the default chevron icon:


<Breadcrumb.Separator>/</Breadcrumb.Separator>

Custom Link Component

Use the render prop on Breadcrumb.Link to render a framework-specific link (e.g. React Router, Next.js):


<Breadcrumb.Link render={<Link to="/paints" />}>Paints</Breadcrumb.Link>

Compound Parts

Part	Description
`Breadcrumb.Root`	`<nav>` wrapper named “Breadcrumb”. Takes `labels` for the parts’ built-in text.
`Breadcrumb.List`	Ordered list (`<ol>`) containing items.
`Breadcrumb.Item`	List item (`<li>`) wrapping a link or page.
`Breadcrumb.Link`	Clickable anchor. Accepts `render` prop for custom link components.
`Breadcrumb.Page`	Current page indicator with `aria-current="page"`.
`Breadcrumb.Separator`	Decorative separator. Renders its own `<li>`, so place it between items, not inside one. Defaults to a chevron icon.
`Breadcrumb.Ellipsis`	Collapsed state indicator (three dots). Screen readers read “More” (`labels.ellipsis`) in its place. Children you pass replace the dots; screen readers read them too, so give a decorative icon `aria-hidden`.

Breadcrumb.Root Props

Name	Type	Default
`labels`	`Partial<BreadcrumbLabels>` Replaces the built-in English strings, e.g. to translate them. Keys you leave out keep the default from `DEFAULT_BREADCRUMB_LABELS`. `aria-label` on Root takes precedence.

All other props are forwarded to the underlying <nav> element.

Breadcrumb.Link Props

Name	Type	Default
`render`	`RenderElement$1` Custom link element to render instead of a native `<a>` (e.g. `<Link to="..." />`).

All other props are forwarded to the underlying <a> element (or the custom element provided via render).

Breadcrumb.Separator Props

All props are forwarded to the underlying <li> element. Pass children to replace the default chevron separator icon.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_BREADCRUMB_LABELS. aria-label on Breadcrumb.Root takes precedence. See Labels.

Name	Type	Default
`root`	`string` Name of the `Breadcrumb.Root` navigation landmark.	`"Breadcrumb"`
`ellipsis`	`string` Text of `Breadcrumb.Ellipsis` for screen readers, which read it in place of the three dots. It is visually hidden.	`"More"`