Sidebar
Vertical navigation panel. variant and collapsed propagate through React Context to all sub-components automatically.
Basic sidebar
Default variant with header, content, and menu items
Page content
With groups
Menu items divided into named groups with SidebarGroupLabel. Standard pattern for dashboard navigation.
Page content
Variants
default (light) and dark variants. All sub-components adapt colors automatically via Context.
defaultContent
darkContent
Collapsed mode
collapsed=true shrinks the sidebar to icon-only width (w-14). Labels are hidden with sr-only.
Page content
Resizable
Sidebar внутри ResizablePanelGroup — тяните разделитель, чтобы изменить ширину. Используется fillContainer чтобы Sidebar занял всю ширину панели.
Тяните разделитель
min 14% · default 28% · max 40%