Loading...
Loading...
> A collapsible navigation sidebar with nested menu support, badges, and icons.
1import { Sidebar, type SidebarItem } from "@/components/ui/sidebar"
Main content area
1const items: SidebarItem[] = [2 { id: "home", label: "Home", icon: <Home className="h-4 w-4" /> },3 { id: "users", label: "Users", icon: <Users className="h-4 w-4" /> },4 { id: "settings", label: "Settings", icon: <Settings className="h-4 w-4" /> },5];67<Sidebar items={items} />
Main content area
1const items: SidebarItem[] = [2 { id: "home", label: "Home", icon: <Home className="h-4 w-4" /> },3 {4 id: "messages",5 label: "Messages",6 icon: <Mail className="h-4 w-4" />,7 badge: 5,8 },9 { id: "users", label: "Users", icon: <Users className="h-4 w-4" />, badge: 12 },10 { id: "settings", label: "Settings", icon: <Settings className="h-4 w-4" /> },11];1213<Sidebar items={items} />
Main content area
1const items: SidebarItem[] = [2 { id: "home", label: "Home", icon: <Home className="h-4 w-4" /> },3 {4 id: "analytics",5 label: "Analytics",6 icon: <BarChart className="h-4 w-4" />,7 children: [8 { id: "overview", label: "Overview", icon: <FileText className="h-4 w-4" /> },9 { id: "reports", label: "Reports", icon: <FileText className="h-4 w-4" /> },10 { id: "insights", label: "Insights", icon: <FileText className="h-4 w-4" /> },11 ],12 },13 {14 id: "settings",15 label: "Settings",16 icon: <Settings className="h-4 w-4" />,17 children: [18 { id: "profile", label: "Profile" },19 { id: "security", label: "Security" },20 { id: "notifications", label: "Notifications" },21 ],22 },23];2425<Sidebar items={items} />
Main content area
1<Sidebar items={items} defaultCollapsed={true} />
Click a sidebar item (check console)
1<Sidebar2 items={items}3 onItemClick={(item) => console.log("Clicked:", item.label)}4/>
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | SidebarItem[] | - | Array of sidebar menu items. |
| defaultCollapsed | boolean | false | Whether the sidebar starts collapsed. |
| className | string | - | Additional CSS classes for the sidebar. |
| onItemClick | (item: SidebarItem) => void | - | Callback fired when a sidebar item is clicked. |
Structure of sidebar menu items.
1interface SidebarItem {2 id: string;3 label: string;4 icon?: React.ReactNode;5 href?: string;6 onClick?: () => void;7 badge?: string | number;8 children?: SidebarItem[];9}