Sidebar

A composable, collapsible sidebar component with responsive mobile support.

1"use client"23import {4  Sidebar, SidebarContent, SidebarGroup,5  SidebarGroupContent, SidebarGroupLabel, SidebarHeader,6  SidebarInset, SidebarMenu, SidebarMenuButton,7  SidebarMenuItem, SidebarProvider, SidebarTrigger,8} from '@/components/ui/sidebar'910function SidebarDemo() {11  return (12    <SidebarProvider>13      <Sidebar>14        <SidebarHeader>...</SidebarHeader>15        <SidebarContent>16          <SidebarGroup>17            <SidebarGroupLabel>Navigation</SidebarGroupLabel>18            <SidebarGroupContent>19              <SidebarMenu>20                <SidebarMenuItem>21                  <SidebarMenuButton isActive>Home</SidebarMenuButton>22                </SidebarMenuItem>23              </SidebarMenu>24            </SidebarGroupContent>25          </SidebarGroup>26        </SidebarContent>27      </Sidebar>28      <SidebarInset>29        <header><SidebarTrigger /></header>30        <main>Content</main>31      </SidebarInset>32    </SidebarProvider>33  )34}

#Installation

bunx --bun barefoot add sidebar

#Usage

1import {2  Sidebar, SidebarContent, SidebarFooter, SidebarGroup,3  SidebarGroupContent, SidebarGroupLabel, SidebarHeader,4  SidebarInset, SidebarMenu, SidebarMenuBadge,5  SidebarMenuButton, SidebarMenuItem, SidebarMenuSub,6  SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider,7  SidebarSeparator, SidebarTrigger,8} from '@/components/ui/sidebar'

#Examples

#Basic

1"use client"23import {4  Sidebar, SidebarContent, SidebarFooter, SidebarGroup,5  SidebarGroupContent, SidebarGroupLabel, SidebarHeader,6  SidebarInset, SidebarMenu, SidebarMenuButton,7  SidebarMenuItem, SidebarProvider, SidebarSeparator,8  SidebarTrigger,9} from '@/components/ui/sidebar'10import { SettingsIcon } from '@/components/ui/icon'1112function SidebarBasic() {13  return (14    <div className="h-[400px] overflow-hidden rounded-lg border">15      <SidebarProvider>16        <Sidebar>17          <SidebarHeader>18            <div className="flex items-center gap-2 px-2 py-1">19              <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground text-xs font-bold">A</div>20              <span className="text-sm font-semibold">Acme Inc</span>21            </div>22          </SidebarHeader>23          <SidebarSeparator />24          <SidebarContent>25            <SidebarGroup>26              <SidebarGroupLabel>Navigation</SidebarGroupLabel>27              <SidebarGroupContent>28                <SidebarMenu>29                  <SidebarMenuItem>30                    <SidebarMenuButton isActive>Home</SidebarMenuButton>31                  </SidebarMenuItem>32                  <SidebarMenuItem>33                    <SidebarMenuButton>Projects</SidebarMenuButton>34                  </SidebarMenuItem>35                  <SidebarMenuItem>36                    <SidebarMenuButton>Inbox</SidebarMenuButton>37                  </SidebarMenuItem>38                  <SidebarMenuItem>39                    <SidebarMenuButton>40                      <SettingsIcon size="sm" />41                      <span>Settings</span>42                    </SidebarMenuButton>43                  </SidebarMenuItem>44                </SidebarMenu>45              </SidebarGroupContent>46            </SidebarGroup>47          </SidebarContent>48          <SidebarFooter>49            <div className="flex items-center gap-2 px-2 py-1 text-sm text-muted-foreground">50              <div className="size-6 rounded-full bg-muted" />51              <span>john@acme.com</span>52            </div>53          </SidebarFooter>54        </Sidebar>55        <SidebarInset>56          <header className="flex h-12 items-center gap-2 border-b px-4">57            <SidebarTrigger />58            <span className="text-sm font-medium">Dashboard</span>59          </header>60          <div className="flex-1 p-4">61            <p className="text-sm text-muted-foreground">62              Main content area. Toggle sidebar with the button or Ctrl+B.63            </p>64          </div>65        </SidebarInset>66      </SidebarProvider>67    </div>68  )69}

#Collapsible Groups

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Sidebar, SidebarContent, SidebarGroup,6  SidebarGroupContent, SidebarGroupLabel, SidebarHeader,7  SidebarInset, SidebarMenu, SidebarMenuButton,8  SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton,9  SidebarMenuSubItem, SidebarProvider, SidebarTrigger,10} from '@/components/ui/sidebar'11import {12  Collapsible, CollapsibleTrigger, CollapsibleContent,13} from '@/components/ui/collapsible'14import { ChevronRightIcon } from '@/components/ui/icon'1516function SidebarCollapsible() {17  const [open, setOpen] = createSignal(true)1819  return (20    <SidebarProvider>21      <Sidebar>22        <SidebarContent>23          <SidebarGroup>24            <SidebarGroupLabel>Platform</SidebarGroupLabel>25            <SidebarGroupContent>26              <SidebarMenu>27                <Collapsible open={open()} onOpenChange={setOpen} className="group/collapsible">28                  <SidebarMenuItem>29                    <CollapsibleTrigger asChild>30                      <SidebarMenuButton>31                        Dashboard32                        <ChevronRightIcon size="sm" className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />33                      </SidebarMenuButton>34                    </CollapsibleTrigger>35                    <CollapsibleContent>36                      <SidebarMenuSub>37                        <SidebarMenuSubItem>38                          <SidebarMenuSubButton isActive>Overview</SidebarMenuSubButton>39                        </SidebarMenuSubItem>40                        <SidebarMenuSubItem>41                          <SidebarMenuSubButton>Analytics</SidebarMenuSubButton>42                        </SidebarMenuSubItem>43                      </SidebarMenuSub>44                    </CollapsibleContent>45                  </SidebarMenuItem>46                </Collapsible>47              </SidebarMenu>48            </SidebarGroupContent>49          </SidebarGroup>50        </SidebarContent>51      </Sidebar>52      <SidebarInset>53        <header><SidebarTrigger /></header>54      </SidebarInset>55    </SidebarProvider>56  )57}

#Floating

1"use client"23import {4  Sidebar, SidebarContent, SidebarGroup,5  SidebarGroupContent, SidebarGroupLabel, SidebarHeader,6  SidebarInset, SidebarMenu, SidebarMenuBadge,7  SidebarMenuButton, SidebarMenuItem, SidebarMenuAction,8  SidebarProvider, SidebarTrigger,9} from '@/components/ui/sidebar'1011function SidebarFloating() {12  return (13    <div className="h-[400px] overflow-hidden rounded-lg border bg-muted/30">14      <SidebarProvider>15        <Sidebar variant="floating">16          <SidebarHeader>17            <div className="flex items-center gap-2 px-2 py-1">18              <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground text-xs font-bold">S</div>19              <span className="text-sm font-semibold">Slack</span>20            </div>21          </SidebarHeader>22          <SidebarContent>23            <SidebarGroup>24              <SidebarGroupLabel>Channels</SidebarGroupLabel>25              <SidebarGroupContent>26                <SidebarMenu>27                  <SidebarMenuItem>28                    <SidebarMenuButton isActive>29                      <span>#</span><span>general</span>30                    </SidebarMenuButton>31                    <SidebarMenuBadge>12</SidebarMenuBadge>32                  </SidebarMenuItem>33                  <SidebarMenuItem>34                    <SidebarMenuButton>35                      <span>#</span><span>engineering</span>36                    </SidebarMenuButton>37                    <SidebarMenuBadge>3</SidebarMenuBadge>38                  </SidebarMenuItem>39                </SidebarMenu>40              </SidebarGroupContent>41            </SidebarGroup>42          </SidebarContent>43        </Sidebar>44        <SidebarInset>45          <header><SidebarTrigger /></header>46        </SidebarInset>47      </SidebarProvider>48    </div>49  )50}

#API Reference

SidebarProvider

Prop	Type	Default	Description
defaultOpen	boolean	true	The default open state of the sidebar.
open	boolean	-	The controlled open state of the sidebar.
onOpenChange	(open: boolean) => void	-	Callback when the sidebar open state changes.

Sidebar

Prop	Type	Default	Description
side	'left' \| 'right'	'left'	Which side of the viewport the sidebar appears on.
variant	'sidebar' \| 'floating' \| 'inset'	'sidebar'	Visual variant. "floating" has rounded corners and shadow. "inset" insets the main content.
collapsible	'offcanvas' \| 'icon' \| 'none'	'offcanvas'	Collapse behavior. "offcanvas" slides completely off. "icon" shrinks to icon width. "none" always visible.

SidebarMenuButton

Prop	Type	Default	Description
variant	'default' \| 'outline'	'default'	Visual variant of the menu button.
size	'default' \| 'sm' \| 'lg'	'default'	Size of the menu button.
isActive	boolean	false	Whether the menu item is currently active.
tooltip	string	-	Tooltip text shown when sidebar is collapsed to icon mode.