Navigation

Breadcrumb

Hierarchy trail rendered as a nav > ol landmark. Accepts an items array or BreadcrumbItem children, a custom separator and ellipsis collapsing.

Import

import { Breadcrumb, BreadcrumbItem } from "@zephora/react";

Examples

Basic

The last item is automatically marked as the current page.

<Breadcrumb
  items={[
    { label: "Home", href: "#" },
    { label: "Components", href: "#" },
    { label: "Breadcrumb" },
  ]}
/>

Custom separator and children

Compose BreadcrumbItem children and swap the separator node.

<Breadcrumb separator="›">
  <BreadcrumbItem href="#">Home</BreadcrumbItem>
  <BreadcrumbItem href="#">Library</BreadcrumbItem>
  <BreadcrumbItem>Data</BreadcrumbItem>
</Breadcrumb>

Collapsed

`maxItems` hides middle items behind an ellipsis button; clicking it expands the trail.

<Breadcrumb
  maxItems={3}
  items={[
    { label: "Home", href: "#" },
    { label: "Docs", href: "#" },
    { label: "Components", href: "#" },
    { label: "Navigation", href: "#" },
    { label: "Breadcrumb" },
  ]}
/>

API

Breadcrumb props

Prop	Type	Default	Description
`items`	`Array<{ label: ReactNode; href?: string; icon?: ReactNode }>`	—	Item data; alternatively pass BreadcrumbItem children.
`separator`	`ReactNode`	`"/"`	Node rendered between items.
`maxItems`	`number`	—	Collapses middle items behind an ellipsis button when exceeded.
`aria-label`	`string`	`"Breadcrumb"`	Accessible name of the nav landmark.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

BreadcrumbItem props

Prop	Type	Default	Description
`href`	`string`	—	Renders the label as a link.
`icon`	`ReactNode`	—	Element rendered before the label.
`current`	`boolean`	—	Marks the current page (aria-current). Defaults to true for the last item.
`unstyled`	`boolean`	—	Overrides the inherited headless mode.