Sidebar

A composable, themeable application sidebar with collapsible sections.

$bunx shadcn@latest add @nx-ui/sidebar
Registry item
Installs withbuttoninputseparatorsheetskeletontooltipuse-mobileutils
Used byapp-shellapp-sidebarscoped-navsidebar-nav

Grouped navigation

The core arrangement — SidebarContent holds SidebarGroups, each with a label and a SidebarMenu of buttons. Mark the current route with isActive.

Programme
Operations

Badges, actions & sub-menus

SidebarMenuBadge shows counts, SidebarGroupAction and SidebarMenuAction add controls, and SidebarMenuSub nests routes beneath a parent.

Movements

Sizes & the outline variant

SidebarMenuButton takes size sm | default | lg and a bordered outline variant for standalone entries.

Disabled & loading

Disable an item with the disabled prop; use SidebarMenuSkeleton rows while route data streams in.

Projects
Loading soil profiles…

Full application sidebar

A realistic composition — header with a workspace label, a filter input, grouped navigation, and a footer account row — as used in the Nexus ReGen app shell.

Nexus ReGenThames Estuary org
Workspace
  • 34
Support

API reference

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