Docs/Sidebar

Sidebar

Collapsible sidebar navigation with provider and sub-components for flexible layouts.

Usage

tsx

1import { SidebarProvider, StormSidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarItem } from '@storm-ds/ui'
2
3<SidebarProvider>
4  <StormSidebar>
5    <SidebarHeader>Logo</SidebarHeader>
6    <SidebarContent>
7      <SidebarGroup>
8        <SidebarItem active>Home</SidebarItem>
9        <SidebarItem>Settings</SidebarItem>
10      </SidebarGroup>
11    </SidebarContent>
12    <SidebarFooter>Footer</SidebarFooter>
13  </StormSidebar>
14  <main>Content</main>
15</SidebarProvider>

With Groups

Main content area

tsx

1<SidebarContent>
2  <SidebarGroup label="Navigation">
3    <SidebarItem active>Home</SidebarItem>
4    <SidebarItem>About</SidebarItem>
5  </SidebarGroup>
6  <SidebarGroup label="Settings">
7    <SidebarItem>Profile</SidebarItem>
8    <SidebarItem>Preferences</SidebarItem>
9  </SidebarGroup>
10</SidebarContent>

Collapsible

Click the trigger to collapse

tsx

1<SidebarProvider collapsible>
2  <StormSidebar>
3    <SidebarTrigger />
4    <SidebarContent>
5      <SidebarItem active>Home</SidebarItem>
6    </SidebarContent>
7  </StormSidebar>
8</SidebarProvider>

Full Layout

Full layout with header, groups, and footer

Props

Prop	Type	Default	Description
collapsible	boolean	false	Enable collapse/expand toggle
defaultOpen	boolean	true	Initial open state
children	React.ReactNode	-	Sidebar content

Use with AI

Create a Next.js component using Storm UI's Sidebar for navigation layouts. Import: `import { SidebarProvider, StormSidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarItem, SidebarTrigger } from '@storm-ds/ui'`. Mark with 'use client'. Sub-components: SidebarProvider (context/layout wrapper), StormSidebar (sidebar container), SidebarHeader (top section), SidebarContent (main content), SidebarFooter (bottom section), SidebarGroup (item grouping with optional label), SidebarItem (individual nav item), SidebarTrigger (toggle button). SidebarProvider props: collapsible (boolean), defaultOpen (boolean). Supports collapsing on mobile. Example: `<SidebarProvider><StormSidebar><SidebarHeader>Logo</SidebarHeader><SidebarContent><SidebarGroup><SidebarItem active>Home</SidebarItem></SidebarGroup></SidebarContent></StormSidebar><main>Content</main></SidebarProvider>`, `<SidebarProvider collapsible><StormSidebar><SidebarTrigger/></StormSidebar></SidebarProvider>`

NavItem

Dialog