App Sidebar

The header / nav / footer sidebar arrangement for the nx app shell.

$bunx shadcn@latest add @nx-ui/app-sidebar
Registry item
Installs withsidebarutils

Header, content & footer slots

AppSidebar is a thin frame over Sidebar: pass header and footer nodes, and the nav as children. Defaults to the inset variant so it pairs with AppShell.

Nexus ReGenThames Estuary org
Workspace
  • 34

Loading state

While route data streams in, swap a group's items for SidebarMenuSkeleton rows — the header and footer slots render immediately.

Nexus ReGen
Loading soil profiles…

Full composition — live

Header and footer filled with the OrgSwitcher and UserMenu blocks, content driven by SidebarNav — the arrangement used across the Nexus ReGen app shell. Rendered live at full size inside the real AppShell; open it in its own window to try the offcanvas collapse.

/view/block-app-sidebar
Open full screen

API reference

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

PropTypeDefaultDescription
headerReact.ReactNode——
footerReact.ReactNode——

…extends React.ComponentProps<typeof Sidebar>