Components

Breadcrumb

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

A static primitive — no 'use client', so it renders inside a Server Component, and it never imports next/*. Its default strings are Vietnamese; pass aria-label and srLabel in an English app.

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="Đường dẫn phân cấp" 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	`'Thêm mục'`	Visually hidden text inside the collapsed-segments indicator. Pass an English string.
`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 built-in label is Vietnamese — pass aria-label="Breadcrumb" in an English app.
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.