Scoped Nav
The two-level sliding sidebar navigation: workspace-level nav and per-project nav with a Back-to-all-projects row.
bunx shadcn@latest add @nx-ui/scoped-navTwo levels, one slide
With no project in scope the top level renders (the Projects picker first, then cross-project zoom-outs). Selecting a project slides the whole nav left — the project level enters from the right, headed by the back row. Clearing reverses the slide. ~200ms translate + fade; instant under prefers-reduced-motion.
Top level: workspace nav. Select a project to slide the whole nav right into its project-level sections:
Contract
Controlled and data-driven: `project` (null = top level) picks the level; `levels.topLevel` is static groups, `levels.projectLevel(project)` builds per-project groups so hrefs and badges can re-target. Wire `onBackToAllProjects` to the SAME handler as the breadcrumbs' All-projects action — the two escapes must never drift. See docs/scoped-shell.md and the full composition in the scoped-app example.
<ScopedNav
levels={{
topLevel: workspaceGroups,
projectLevel: (project) => projectGroups(project),
}}
project={scope.project} // null → top level
onBackToAllProjects={clearProject} // same handler as onProjectClear
/>API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
levels* | ScopedNavLevels | — | — |
project* | ProjectRef | null | — | The scoped project — null renders the top level. |
onBackToAllProjects | () => void | — | The back row's action — wire to the same handler as `onProjectClear`. |
backLabel | string | "Back to all projects" | — |
className | string | — | — |