Components/Sidebar

Sidebar

Composable sidebar with collapsible state, mobile overlay, and a keyboard shortcut (⌘B / Ctrl+B).

Dashboard

Charts, KPIs, and recent activity for your workspace.

Installation

npx ajaxui add sidebar

Notes

Anatomy

<SidebarProvider>             // collapse + mobile state owner
  <Sidebar>
    <SidebarHeader/>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel/>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton active/>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter/>
  </Sidebar>
  <SidebarInset>              // main content beside the sidebar
    <SidebarTrigger/>         // collapse/expand button
  </SidebarInset>
</SidebarProvider>

Props

Prop	Type	Default	Description
side	"left" \| "right"	"left"	—
collapsible	boolean	true	—
active	boolean (on MenuButton)	—	Highlights the active route.