A sidebar component designed for easy customization and consistent theming.
class-variance-authority
lucide-react@radix-ui/react-slot
This is a demo sidebar component. Click the menu icon to toggle the sidebar.
Here you will see your status.
1'use client'
2
3import React from 'react'
4import {
5 Calendar,
6 ChevronDown,
7 Home,
8 Inbox,
9 Search,
10 Settings,
11 User,
12} from 'lucide-react'
13
14import {
15 Sidebar,
16 SidebarContent,
17 SidebarFooter,
18 SidebarGroup,
19 SidebarGroupContent,
20 SidebarGroupLabel,
21 SidebarHeader,
22 SidebarInset,
23 SidebarMenu,
24 SidebarMenuButton,
25 SidebarMenuItem,
26 SidebarProvider,
27 SidebarTrigger,
28 useSidebar,
29} from '@/components/ui/sidebar'
30
31const navigationItems = [
32 { title: 'Home', url: '#', icon: Home },
33 { title: 'Inbox', url: '#', icon: Inbox },
34 { title: 'Calendar', url: '#', icon: Calendar },
35 { title: 'Search', url: '#', icon: Search },
36 { title: 'Settings', url: '#', icon: Settings },
37]
38
39function AppSidebar() {
40 return (
41 <Sidebar className="relative">
42 <SidebarHeader>
43 <SidebarMenu>
44 <SidebarMenuItem>
45 <SidebarMenuButton size="lg" asChild>
46 <a href="#">
47 <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
48 <Home className="size-4" />
49 </div>
50 <div className="flex flex-col gap-0.5 leading-none">
51 <span className="font-semibold">
52 Acme Inc
53 </span>
54 <span className="text-xs">Enterprise</span>
55 </div>
56 </a>
57 </SidebarMenuButton>
58 </SidebarMenuItem>
59 </SidebarMenu>
60 </SidebarHeader>
61 <SidebarContent>
62 <SidebarGroup>
63 <SidebarGroupLabel>Platform</SidebarGroupLabel>
64 <SidebarGroupContent>
65 <SidebarMenu>
66 {navigationItems.map((item) => (
67 <SidebarMenuItem key={item.title}>
68 <SidebarMenuButton
69 asChild
70 tooltip={item.title}
71 >
72 <a href={item.url}>
73 <item.icon />
74 <span>{item.title}</span>
75 </a>
76 </SidebarMenuButton>
77 </SidebarMenuItem>
78 ))}
79 </SidebarMenu>
80 </SidebarGroupContent>
81 </SidebarGroup>
82 <SidebarGroup>
83 <SidebarGroupLabel>Projects</SidebarGroupLabel>
84 <SidebarGroupContent>
85 <SidebarMenu>
86 <SidebarMenuItem>
87 <SidebarMenuButton>
88 <div className="bg-background flex size-6 items-center justify-center rounded-md border">
89 <span className="text-xs font-medium">
90 D
91 </span>
92 </div>
93 <span>Design Engineering</span>
94 </SidebarMenuButton>
95 </SidebarMenuItem>
96 <SidebarMenuItem>
97 <SidebarMenuButton>
98 <div className="bg-background flex size-6 items-center justify-center rounded-md border">
99 <span className="text-xs font-medium">
100 M
101 </span>
102 </div>
103 <span>Marketing Team</span>
104 </SidebarMenuButton>
105 </SidebarMenuItem>
106 </SidebarMenu>
107 </SidebarGroupContent>
108 </SidebarGroup>
109 </SidebarContent>
110 <SidebarFooter>
111 <SidebarMenu>
112 <SidebarMenuItem>
113 <SidebarMenuButton size="lg" asChild>
114 <a href="#">
115 <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
116 <User className="size-4" />
117 </div>
118 <div className="flex flex-col gap-0.5 leading-none">
119 <span className="font-semibold">
120 John Doe
121 </span>
122 <span className="text-xs">
123 john@example.com
124 </span>
125 </div>
126 <ChevronDown className="ml-auto" />
127 </a>
128 </SidebarMenuButton>
129 </SidebarMenuItem>
130 </SidebarMenu>
131 </SidebarFooter>
132 </Sidebar>
133 )
134}
135
136function DemoContent() {
137 return (
138 <div className="flex h-full w-full flex-col">
139 <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
140 <SidebarTrigger className="flex md:hidden lg:hidden" />
141 <div className="flex items-center gap-2">
142 <span className="text-sm font-medium">Dashboard</span>
143 </div>
144 </header>
145 <div className="flex-1 overflow-auto p-4">
146 <div className="space-y-4">
147 <div className="grid gap-4 md:grid-cols-2">
148 <div className="bg-card rounded-lg border p-6 shadow-sm">
149 <h3 className="mb-2 text-lg font-semibold">
150 Welcome
151 </h3>
152 <p className="text-muted-foreground text-sm">
153 This is a demo sidebar component. Click the menu
154 icon to toggle the sidebar.
155 </p>
156 </div>
157 <div className="bg-card rounded-lg border p-6 shadow-sm">
158 <h3 className="mb-2 text-lg font-semibold">
159 Status
160 </h3>
161 <p className="text-muted-foreground text-sm">
162 Here you will see your status.
163 </p>
164 </div>
165 </div>
166 <div className="bg-card rounded-lg border p-6 shadow-sm">
167 <h3 className="mb-3 text-lg font-semibold">Features</h3>
168 <ul className="text-muted-foreground space-y-2 text-sm">
169 <li>
170 ā¢ Collapsible sidebar with smooth transitions
171 </li>
172 <li>ā¢ Responsive design for mobile and desktop</li>
173 <li>ā¢ Keyboard shortcut support (Cmd/Ctrl + B)</li>
174 <li>ā¢ Tooltip support when collapsed</li>
175 <li>ā¢ Customizable variants and sizes</li>
176 </ul>
177 </div>
178 </div>
179 </div>
180 </div>
181 )
182}
183
184export function SidebarDemo() {
185 return (
186 <div className="bg-background relative h-[600px] w-full overflow-hidden rounded-lg border">
187 <SidebarProvider defaultOpen={true}>
188 <div className="flex h-full w-full">
189 <AppSidebar />
190 <SidebarInset className="flex-1">
191 <DemoContent />
192 </SidebarInset>
193 </div>
194 </SidebarProvider>
195 </div>
196 )
197}
198Install the following dependencies:
Collapsible Groups
Click on the arrows next to Analytics, Projects, or Team to expand/collapse the menu groups.
Status
Sidebar is currently expanded.
Features
1'use client'
2
3import React from 'react'
4import {
5 BarChart,
6 Calendar,
7 ChevronDown,
8 ChevronRight,
9 File,
10 Folder,
11 Home,
12 Inbox,
13 LayoutDashboard,
14 Package,
15 Search,
16 Settings,
17 User,
18 Users,
19} from 'lucide-react'
20
21import { cn } from '@/lib/utils'
22import { Collapsible } from '@/components/ui/collapsible'
23import {
24 Sidebar,
25 SidebarContent,
26 SidebarFooter,
27 SidebarGroup,
28 SidebarGroupContent,
29 SidebarGroupLabel,
30 SidebarHeader,
31 SidebarInset,
32 SidebarMenu,
33 SidebarMenuButton,
34 SidebarMenuItem,
35 SidebarMenuSub,
36 SidebarMenuSubButton,
37 SidebarMenuSubItem,
38 SidebarProvider,
39 SidebarTrigger,
40 useSidebar,
41} from '@/components/ui/sidebar'
42
43const navigationItems = [
44 { title: 'Dashboard', url: '#', icon: LayoutDashboard },
45 { title: 'Search', url: '#', icon: Search },
46]
47
48const analyticsItems = [
49 { title: 'Overview', url: '#' },
50 { title: 'Reports', url: '#' },
51 { title: 'Statistics', url: '#' },
52]
53
54const projectItems = [
55 { title: 'Design System', url: '#' },
56 { title: 'Marketing Site', url: '#' },
57 { title: 'Mobile App', url: '#' },
58]
59
60const teamItems = [
61 { title: 'Members', url: '#' },
62 { title: 'Permissions', url: '#' },
63 { title: 'Invitations', url: '#' },
64]
65
66function CollapsibleGroup({
67 title,
68 icon: Icon,
69 items,
70 defaultOpen = false,
71}: {
72 title: string
73 icon: any
74 items: { title: string; url: string }[]
75 defaultOpen?: boolean
76}) {
77 const [isOpen, setIsOpen] = React.useState(defaultOpen)
78
79 return (
80 <Collapsible>
81 <SidebarMenu>
82 <SidebarMenuItem>
83 <SidebarMenuButton
84 onClick={() => setIsOpen(!isOpen)}
85 className="w-full"
86 >
87 <Icon className="size-4" />
88 <span>{title}</span>
89 {isOpen ? (
90 <ChevronDown className="ml-auto size-4 transition-transform" />
91 ) : (
92 <ChevronRight className="ml-auto size-4 transition-transform" />
93 )}
94 </SidebarMenuButton>
95 {isOpen && (
96 <SidebarMenuSub>
97 {items.map((item) => (
98 <SidebarMenuSubItem key={item.title}>
99 <SidebarMenuSubButton asChild>
100 <a href={item.url}>
101 <span>{item.title}</span>
102 </a>
103 </SidebarMenuSubButton>
104 </SidebarMenuSubItem>
105 ))}
106 </SidebarMenuSub>
107 )}
108 </SidebarMenuItem>
109 </SidebarMenu>
110 </Collapsible>
111 )
112}
113
114function AppSidebar() {
115 return (
116 <Sidebar className="flex h-full flex-col">
117 <SidebarHeader>
118 <SidebarMenu>
119 <SidebarMenuItem>
120 <SidebarMenuButton size="lg" asChild>
121 <a href="#">
122 <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
123 <Home className="size-4" />
124 </div>
125 <div className="flex flex-col gap-0.5 leading-none">
126 <span className="font-semibold">
127 Acme Inc
128 </span>
129 <span className="text-xs">Enterprise</span>
130 </div>
131 </a>
132 </SidebarMenuButton>
133 </SidebarMenuItem>
134 </SidebarMenu>
135 </SidebarHeader>
136 <SidebarContent className="flex-1 overflow-auto">
137 <SidebarGroup>
138 <SidebarGroupLabel>Navigation</SidebarGroupLabel>
139 <SidebarGroupContent>
140 <SidebarMenu>
141 {navigationItems.map((item) => (
142 <SidebarMenuItem key={item.title}>
143 <SidebarMenuButton
144 asChild
145 tooltip={item.title}
146 >
147 <a href={item.url}>
148 <item.icon />
149 <span>{item.title}</span>
150 </a>
151 </SidebarMenuButton>
152 </SidebarMenuItem>
153 ))}
154 </SidebarMenu>
155 <CollapsibleGroup
156 title="Analytics"
157 icon={BarChart}
158 items={analyticsItems}
159 defaultOpen={true}
160 />
161
162 <CollapsibleGroup
163 title="Projects"
164 icon={Folder}
165 items={projectItems}
166 />
167
168 <CollapsibleGroup
169 title="Team"
170 icon={Users}
171 items={teamItems}
172 />
173 </SidebarGroupContent>
174 </SidebarGroup>
175
176 <SidebarGroup>
177 <SidebarGroupLabel>Other</SidebarGroupLabel>
178 <SidebarGroupContent>
179 <SidebarMenu>
180 <SidebarMenuItem>
181 <SidebarMenuButton asChild tooltip="Settings">
182 <a href="#">
183 <Settings />
184 <span>Settings</span>
185 </a>
186 </SidebarMenuButton>
187 </SidebarMenuItem>
188 </SidebarMenu>
189 </SidebarGroupContent>
190 </SidebarGroup>
191 </SidebarContent>
192 <SidebarFooter className="mt-auto">
193 <SidebarMenu>
194 <SidebarMenuItem>
195 <SidebarMenuButton size="lg" asChild>
196 <a href="#">
197 <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
198 <User className="size-4" />
199 </div>
200 <div className="flex flex-col gap-0.5 leading-none">
201 <span className="font-semibold">
202 John Doe
203 </span>
204 <span className="text-xs">
205 john@example.com
206 </span>
207 </div>
208 <ChevronDown className="ml-auto" />
209 </a>
210 </SidebarMenuButton>
211 </SidebarMenuItem>
212 </SidebarMenu>
213 </SidebarFooter>
214 </Sidebar>
215 )
216}
217
218function DemoContent() {
219 const { state } = useSidebar()
220
221 return (
222 <div className={cn('flex h-full w-full flex-col')}>
223 <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
224 <SidebarTrigger />
225 <div className="bg-border mx-2 h-6 w-px" />
226 <div className="flex items-center gap-2">
227 <span className="text-sm font-medium">Dashboard</span>
228 </div>
229 </header>
230 <div className="flex-1 overflow-auto p-4">
231 <div className="space-y-4">
232 <div className="grid gap-4 md:grid-cols-2">
233 <div className="bg-card rounded-lg border p-6 shadow-sm">
234 <p className="mb-2 text-lg font-semibold">
235 Collapsible Groups
236 </p>
237 <p className="text-muted-foreground text-sm">
238 Click on the arrows next to Analytics, Projects,
239 or Team to expand/collapse the menu groups.
240 </p>
241 </div>
242 <div className="bg-card rounded-lg border p-6 shadow-sm">
243 <p className="mb-2 text-lg font-semibold">Status</p>
244 <p className="text-muted-foreground text-sm">
245 Sidebar is currently{' '}
246 {state === 'expanded'
247 ? 'expanded'
248 : 'collapsed'}
249 .
250 </p>
251 </div>
252 </div>
253 <div className="bg-card rounded-lg border p-6 shadow-sm">
254 <p className="mb-3 text-lg font-semibold">Features</p>
255 <ul className="text-muted-foreground space-y-2 text-sm">
256 <li>
257 ā¢ Collapsible menu groups with smooth animations
258 </li>
259 <li>
260 ā¢ Independent expand/collapse state for each
261 group
262 </li>
263 <li>ā¢ Arrow icons that rotate on toggle</li>
264 <li>ā¢ Sub-menu items with proper indentation</li>
265 <li>ā¢ Persistent sidebar collapse state</li>
266 </ul>
267 </div>
268 </div>
269 </div>
270 </div>
271 )
272}
273
274export function SidebarCollapsible() {
275 return (
276 <div className="bg-background relative isolate h-[600px] w-full transform-gpu overflow-hidden rounded-lg border">
277 <SidebarProvider defaultOpen={true}>
278 <AppSidebar />
279 <SidebarInset>
280 <DemoContent />
281 </SidebarInset>
282 </SidebarProvider>
283 </div>
284 )
285}
286| Prop | Type | Default |
|---|---|---|
| defaultOpen | boolean | true |
| open | boolean | true |
| onOpenChange | (open: boolean) => void | - |
| Prop | Type | Default |
|---|---|---|
| side | left, right | left |
| variant | sidebar, floating, inset | sidebar |
| collapsible | offcanvas, icon, none | offcanvas |
| children | React.ReactNode | - |
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| isActive | boolean | false |
| variant | default, outline | default |
| size | default, sm,lg | default |
| tooltip | string | - |
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| showOnHover | boolean | false |
| Prop | Type | Default |
|---|---|---|
| showIcon | boolean | false |
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| isActive | boolean | false |
| size | sm,md | md |