Search nx-ui
Jump to any foundation, component, block or example.
Scope Breadcrumbs
The nx top-bar context switcher — not a plain trail. The first crumb is the scoped organisation with a searchable workspace menu; the second, only when scoped, is the project switcher (FolderCode trigger, search by name/ref/client/externalRef, All-projects escape); ordinary path crumbs follow. For route trails without scope, install app-breadcrumbs — its gallery redirects here.
bunx shadcn@latest add @nx-ui/scope-breadcrumbsThe full switcher flow
Open the org and project menus: both are searchable (org once the list is long enough; project always). Org switches auth scope and clears the project; project jumps within the active org or escapes via All projects. Create slots appear in both menus. Note the deliberately over-long fourth project name — it truncates.
Workspace level
When scope.project is null the project crumb disappears entirely — the trail picks up straight after the org crumb, for cross-project pages like the projects picker or compliance overview.
Custom escape label
The leave-scope action defaults to All projects; apps whose narrowing isn't a project can relabel it — open the project menu to see All sites.
In the AppShell top bar
Where it actually mounts: the h-12 gutter strip above the page card — scope switcher left, icon-button actions right. The bar belongs to the shell, so it never scrolls with the card.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
scope* | Scope | — | The active org ▸ project scope (project `null` at workspace level). |
orgs* | OrgRef[] | — | Organisations the viewer can switch to (including the active one). |
projects* | ProjectRef[] | — | Projects of the ACTIVE org (including the scoped one, when set). |
onCreateOrg | () => void | — | "Create organisation" menu slot — omit to hide the action. |
onCreateProject | () => void | — | "New project" menu slot — omit to hide the action. |
onManageOrgs | () => void | — | Optional org-settings / manage footer action. |
manageOrgsLabel | string | "Manage organisations" | — |
allProjectsLabel | string | "All projects" | Label of the leave-project-scope action in the project menu. |
searchThreshold | number | 6 | Show search once a switcher list reaches this many items. Defaults to 6 — short demo lists stay a plain menu. |
trail | ScopeTrailItem[] | [] | Ordinary path crumbs after the scope (last renders as current page). |
…extends React.ComponentProps<typeof Breadcrumb>, ScopeChangeHandlers