Components

Breadcrumb

Shows the user's location within a nested hierarchy and lets them navigate back up the path.

Basic usage

Compose links with separators and end on a BreadcrumbPage for the current location.

For deep hierarchies, replace middle segments with a BreadcrumbEllipsis to keep the trail compact.

Pass any node as children to BreadcrumbSeparator to swap the default chevron — here a Lucide Slash.

Prop	Type	Default	Description
`Breadcrumb`	nav props	`—`	Root landmark. Renders a <nav aria-label="breadcrumb"> wrapper.
`BreadcrumbList`	ol props	`—`	Ordered list of items. Handles wrapping, gap, and muted text styling.
`BreadcrumbItem`	li props	`—`	A single segment. Wraps a link, page, or ellipsis with inline alignment.
`BreadcrumbLink`	a props & { asChild?: boolean }	`—`	Navigable segment. Set asChild to render through a custom link component such as Next.js Link.
`BreadcrumbPage`	span props	`—`	The current page. Non-interactive, with aria-current="page".
`BreadcrumbSeparator`	li props	`ChevronRight`	Visual divider between items. Pass children to override the default chevron icon.
`BreadcrumbEllipsis`	span props	`—`	Collapsed-segments indicator rendering a "..." glyph with a visually-hidden "More" label.

The root renders a <nav aria-label="breadcrumb"> landmark, so assistive tech announces the trail as a distinct navigation region.

BreadcrumbPage carries aria-current="page" and aria-disabled, marking the current location as non-interactive.

Separators are decorative — they use role="presentation" and aria-hidden so they are skipped by screen readers.

BreadcrumbEllipsis includes a visually-hidden “More” label so collapsed segments are still announced.