Sidebar

Sidebar holds the primary navigation of an app with many sections, grouped under labels, with workspace and account menus at the ends. It handles desktop collapse, an optional resize rail and the mobile sheet. For a full page frame with header and scrolling content, start from Dashboard Shell.

Install

bashnpx shadcn@4.18.0 add @siteplane/sidebar

Import it from @/siteplane/components/sidebar. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Dashboard Shell: Pick Dashboard Shell instead when you want the sidebar, sticky header and scrolling main area wired together.
• vs Navigation Menu: Pick Navigation Menu instead for a handful of top-level pages that fit in a header row.
• vs Drawer: Pick Drawer for a standalone mobile menu without a desktop sidebar.

Rules

• Place the Sidebar and its neighbouring content inside one SidebarProvider, which holds the open state.
• Read the sidebar_state cookie on the server and pass it as defaultOpen; the provider writes the cookie but never reads it.
• Set active on the SidebarMenuButton for the current page and pass a router link through render.
• Give each SidebarMenuButton a tooltip so the collapsed icon rail still names its destinations.
• Turn off keyboardShortcut on any secondary sidebar so only the main one answers Ctrl/Cmd+B.
• Keep the padding on SidebarHeader, SidebarGroup and SidebarFooter; it draws the leading gutter.

Reference

• Sidebar docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Navigation. Read the installed source under src/siteplane before relying on an API.