Primary usage
A plain trail: every item but the last renders as a link, the last renders as the current page.
App Breadcrumbs
Breadcrumb navigation styled for the nx app shell.
$
Registry itembunx shadcn@latest add @nx-ui/app-breadcrumbsScope switcher — the real nx top bar
ScopeBreadcrumbs (its own registry item, scope-breadcrumbs) is the context switcher the nx shell mounts in the AppShell top bar. The first crumb is the scoped ORGANISATION — switching it changes auth scope; the second, only present when a project is in scope, switches between the org's CONSTRUCTION PROJECTS or clears back to All projects. Path crumbs follow. Try all three menus:
Clear the project via its menu ("All projects") — the crumb disappears and the trail returns to workspace level. Switching organisation also clears it: the project belonged to the old org.
Org ▸ project switcher
Give an item a `menu` and it renders as a dropdown switcher instead of a link — the pattern used for the organisation crumb in the nx header. The active entry gets a tick.
Multiple switchers
Any number of crumbs can carry a menu — here both the organisation and the project are switchable, with a plain final crumb for the current page.
Deep trail
Icons aren't part of the item shape — depth is communicated through labels and separators alone, even several levels deep.
Above a page title
The realistic composition: the trail sits above the page heading, with the leading crumb acting as the org switcher.
Delivery #4471
3.2t green waste received from Greenfield Collective, awaiting shredding.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
items* | AppBreadcrumbItem[] | — | — |
…extends React.ComponentProps<typeof Breadcrumb>