Scope Breadcrumbs
The nx top-bar context switcher — not a plain trail. The first crumb is the scoped organisation with a workspace menu; the second, only when scoped, is the project switcher with an All-projects escape; ordinary path crumbs follow. For route trails without scope, use app-breadcrumbs.
bunx shadcn@latest add @nx-ui/scope-breadcrumbsThe full switcher flow
Open all three menus: the org crumb switches auth scope (and clears the project — it belonged to the old org), the project crumb jumps between the active org's projects or escapes via All projects, and the trail follows as ordinary crumbs. 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. |
allProjectsLabel | string | "All projects" | Label of the leave-project-scope action in the project menu. |
trail | ScopeTrailItem[] | [] | Ordinary path crumbs after the scope (last renders as current page). |
…extends React.ComponentProps<typeof Breadcrumb>, ScopeChangeHandlers