ComponentsBasic
Sidebar
Collapsible navigation sidebar
The Sidebar component provides a collapsible navigation sidebar for applications.
Basic Usage
Basic Sidebar
With Groups
Grouped Sidebar
Collapsible
Collapsible Sidebar
Schema
interface SidebarItem {
label: string;
icon?: string;
href?: string;
active?: boolean;
badge?: string | number;
}
interface SidebarGroup {
title?: string;
items: SidebarItem[];
}
interface SidebarSchema {
type: 'sidebar';
items?: SidebarItem[]; // Flat list of items
groups?: SidebarGroup[]; // Grouped items
collapsible?: boolean; // Allow collapse
defaultCollapsed?: boolean; // Initial state
// Styling
className?: string;
}