Sidebar Nav

Grouped, active-aware navigation for the app-shell sidebar.

$bunx shadcn@latest add @nx-ui/sidebar-nav
Registry item
Installs withcollapsiblesidebarutils
Used byscoped-nav

Primary usage

Two labelled groups, icons, a count badge and an active item.

Badge content

Badges accept a plain number/string or any ReactNode, such as a status Badge.

Collapsible sub-menu

An item with `items` becomes a collapsible group; it opens by default when it or a child is active.

Full sidebar composition

A realistic Nexus ReGen navigation tree: operational groups, a collapsible sites sub-menu and an organisation group.

Scroll affordances

When the nav outgrows its container, wrap it in the ScrollFade block: token-gradient fades appear at whichever edge still has content beyond it, and the optional indicator pill adds an explicit “there’s more down here” affordance — click it to scroll a viewport, and it fades away at the bottom (instantly under reduced motion). Left: fades only. Right: fades plus the labelled indicator pill (indicatorLabel also takes a count hint, e.g. “4 more”). Inside the app shell, wire it as <AppSidebar><ScrollFade indicator><SidebarNav …/></ScrollFade></AppSidebar> — the showcase’s own sidebar is composed exactly this way. Match fadeFrom to the surface behind the list (here from-sidebar).

API reference

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

PropTypeDefaultDescription
groups*SidebarNavGroup[]——