Search nx-ui

Jump to any foundation, component, block or example.

Breadcrumb

Displays the path to the current page and lets the user navigate back up the hierarchy.

$bunx shadcn@latest add @nx-ui/breadcrumb
Registry item
Installs withutils
Used byapp-breadcrumbsorganisation-scope-breadcrumbsscope-breadcrumbs

Primary usage

A simple trail from the site root down to the current page.

With icons

A leading icon on the root link (or any item) reinforces where the trail starts — icons run at the UUI 20px size against the small semibold labels.

Brand-tinted current page

Untitled UI's text breadcrumbs mark the current page in the brand's secondary text colour — opt in with a class on BreadcrumbPage.

Line variant

variant='line' on BreadcrumbList frames the trail with the UUI top-and-bottom hairline treatment — for breadcrumbs sitting as their own band above page content.

Custom separator

Pass children to BreadcrumbSeparator to swap the default chevron for any glyph, such as a plain slash.

Button variant

Pass variant='button' per crumb (and on BreadcrumbList for the tighter pill spacing) to render each crumb as a hover pill — the UUI button breadcrumb style. A leading home icon marks the root.

Separator styles

The separator supports chevron (default), slash and dot variants via the `variant` prop.

Collapsed with overflow menu

Long hierarchies collapse the middle items behind an ellipsis, which opens a dropdown of the hidden links — a realistic pattern for deeply nested organisation structures.

Realistic composition

A breadcrumb sat above a page heading, as used across the Nexus ReGen app shell.

Permit EPR/PB3922KL

Environmental permit for anaerobic digestion feedstock intake and digestate storage at Riverside AD Facility.

Looking for the app-shell scope trail — the org ▸ project switcher crumbs in the top bar? That is the Scope Breadcrumbs block, composed on these primitives.

API reference

Exported parts and their props, extracted from the component source.