Components

Breadcrumb

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

Since 3.0.0 the module carries 'use client': its two strings — the landmark name “Breadcrumb” and the ellipsis label “More” — follow the nearest ComitorLocaleProvider, and a context can only be read on the client. A Server Component still renders it as before: none of its props is a function, and BreadcrumbLink asChild still takes a <Link> written on the server — Radix Slot unwraps the element when it arrives across the boundary. It never imports next/*, and aria-label / srLabel still override either string on one instance.

Basic usage

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

Collapsed path

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

Custom separator

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

Client-side routing

BreadcrumbLink takes asChild: it hands its classes and data-slot to the element you nest inside, instead of rendering its own anchor. That is how the primitive stays free of any next/* dependency while still supporting next/link. RouteTabs answers the same problem from the other side, with a LinkComponent prop you hand your app's link to.

Props

Prop	Type	Default	Description
`Breadcrumb`	React.ComponentProps<'nav'>	`—`	Root landmark. Renders a <nav> carrying aria-label="Breadcrumb" — from ComitorLocaleProvider, “Đường dẫn phân cấp” under locale="vi" — unless you pass your own.
`BreadcrumbList`	React.ComponentProps<'ol'>	`—`	Ordered list of items. Handles wrapping, gap, and muted text styling.
`BreadcrumbItem`	React.ComponentProps<'li'>	`—`	A single segment. Wraps a link, page, or ellipsis with inline alignment.
`BreadcrumbLink`	React.ComponentProps<'a'> & { asChild?: boolean }	`—`	Navigable segment. Set asChild to render through a custom link component such as next/link.
`BreadcrumbPage`	React.ComponentProps<'span'>	`—`	The current page: a <span> with role="link", aria-disabled and aria-current="page". Deliberately not focusable.
`BreadcrumbSeparator`	React.ComponentProps<'li'>	`ChevronRight`	Visual divider between items, marked role="presentation" and aria-hidden. Pass children to replace the default chevron.
`BreadcrumbEllipsis — srLabel`	string	`'More'`	Visually hidden text inside the collapsed-segments indicator. Follows ComitorLocaleProvider (“Thêm mục” under locale="vi"); a value passed here wins.
`BreadcrumbEllipsis — ...rest`	React.ComponentProps<'span'>	`—`	Renders a MoreHorizontal icon in a 36px box, marked role="presentation" and aria-hidden.

Accessibility

The root renders a <nav> landmark with an aria-label, so assistive tech announces the trail as a distinct navigation region. The label is “Breadcrumb” by default and follows the provider's language; pass your own aria-label when a page carries more than one trail.
BreadcrumbPage carries aria-current="page" and aria-disabled, marking the current location as non-interactive. It borrows role="link" so the segment is read in the same voice as its siblings, and it is intentionally not focusable — there is nowhere for it to go.
Separators are decorative — they use role="presentation" and aria-hidden so they are skipped by screen readers.
BreadcrumbEllipsis is decorative too: the whole span is role="presentation" and aria-hidden, so screen readers hear the trail jump straight from one visible segment to the next. Its srLabel is the visually-hidden fallback text, not an announcement. If the collapsed segments must stay reachable, put them behind a real control — a DropdownMenu trigger in that item — rather than relying on the ellipsis alone.