Sidebar

A composable, themeable and customizable sidebar component.

"use client"

import {
  CalendarIcon,
  HomeIcon,
  InboxIcon,
  SearchIcon,
  SettingsIcon,
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/cubix/sidebar"

const items = [
  { title: "Home", icon: HomeIcon },
  { title: "Inbox", icon: InboxIcon },
  { title: "Calendar", icon: CalendarIcon },
  { title: "Search", icon: SearchIcon },
  { title: "Settings", icon: SettingsIcon },
]

export function SidebarDemo() {
  return (
    <SidebarProvider>
      <Sidebar collapsible="icon">
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" tooltip="Cubix">
                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                  <span className="text-sm font-semibold">C</span>
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">Cubix</span>
                  <span className="truncate text-xs">Design system</span>
                </div>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton tooltip={item.title}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-12 items-center gap-2 border-b px-4">
          <SidebarTrigger />
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}

Installation

pnpm dlx cubix@latest add sidebar

Usage

Import

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/cubix/sidebar"

Example

<SidebarProvider>
  <Sidebar>
    <SidebarContent />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

Composition

Use the following composition to build a sidebar layout:

Structure

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       └── SidebarGroupContent
│   │           └── SidebarMenu
│   │               └── SidebarMenuItem
│   │                   └── SidebarMenuButton
│   ├── SidebarFooter
│   └── SidebarRail
└── SidebarInset
    └── SidebarTrigger

Side

Use the side prop to place the sidebar on the left or right.

<Sidebar side="left" />
<Sidebar side="right" />

Collapsible

Use the collapsible prop to control how the sidebar collapses. offcanvas slides away, icon collapses to icons, and none disables collapsing.

<Sidebar collapsible="offcanvas" />
<Sidebar collapsible="icon" />
<Sidebar collapsible="none" />

API Reference

SidebarProvider

Prop	Type	Default	Description
defaultOpen	boolean	true	Initial open state when uncontrolled.
open	boolean	-	Controlled open state of the sidebar.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
className	string	-	Additional Tailwind classes merged with the wrapper styles (last one wins).
children	React.ReactNode	-	Sidebar and inset content.

Sidebar

Prop	Type	Default	Description
side	"left" \| "right"	"left"	Which side of the layout the sidebar appears on.
variant	"sidebar" \| "floating" \| "inset"	"sidebar"	Visual style of the sidebar panel.
collapsible	"offcanvas" \| "icon" \| "none"	"offcanvas"	How the sidebar collapses on desktop.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Header, content, footer, and related parts.

SidebarMenuButton

Prop	Type	Default	Description
isActive	boolean	false	Marks the menu button as the active item.
variant	"default" \| "outline"	"default"	Visual variant of the menu button.
size	"default" \| "sm" \| "lg"	"default"	Size of the menu button.
tooltip	string \| TooltipContent props	-	Tooltip shown when the sidebar is collapsed to icons.
render	React.ReactElement	-	Compose the button onto a child element such as an anchor (Base UI).
asChild	boolean	-	Compose the button onto a child element such as an anchor (Radix UI).