Sidebar

Installation

Basic App Sidebar

Start with the default uncontrolled composition from shadcn: provider, sidebar, grouped menu content, and a trigger in the main shell. This preview keeps the sidebar inside the docs frame with absolute!; app layouts can usually omit that override.

Operations Sidebar With User Menu

This example mirrors the provided operations-style sidebar more closely: a workspace switcher at the top, grouped navigation in the middle, and a bottom user-info row that opens a dropdown menu. The contained preview uses absolute! plus h-full! so the footer stays visible inside the docs frame.

Inset Project Workspace

Use the shadcn inset pattern when the sidebar should frame a lifted content surface. This demo adds nested submenu items and a group action while keeping the preview and usage code in the same semantic colors.