Library/Sidebar

Sidebar

Collapsible application sidebar with animated active states and grouped navigation.

Modular Build
Interactive Preview
Initialising Operative...

Architecture

Component Architecture
Sidebar/

Prop Usage

PropTypeDefaultDescription
defaultCollapsed
booleanfalseInitial state of the sidebar.
className
stringAdditional classes on the sidebar container.

Usage

import { Sidebar, SidebarItem, SidebarGroup } from '@/ui'; import { Home, Settings } from 'lucide-react'; <Sidebar> <SidebarGroup label="Menu"> <SidebarItem icon={<Home size={18} />} label="Dashboard" active /> </SidebarGroup> <SidebarGroup label="System"> <SidebarItem icon={<Settings size={18} />} label="Preferences" /> </SidebarGroup> </Sidebar>