ObjectUIComponentsBasic
Sidebar
Collapsible navigation sidebar
The Sidebar component provides a collapsible navigation sidebar for applications.
Basic Usage
Basic Sidebar
{
"type": "sidebar-provider",
"body": [
{
"type": "sidebar",
"body": [
{
"type": "sidebar-content",
"body": [
{
"type": "sidebar-group",
"label": "Menu",
"body": [
{
"type": "sidebar-menu",
"body": [
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Dashboard"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Projects"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Team"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Settings"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "sidebar-inset",
"body": [
{
"type": "div",
"className": "p-4",
"body": [
{
"type": "text",
"content": "Main content area"
}
]
}
]
}
]
}With Groups
Grouped Sidebar
{
"type": "sidebar-provider",
"body": [
{
"type": "sidebar",
"body": [
{
"type": "sidebar-content",
"body": [
{
"type": "sidebar-group",
"label": "Main",
"body": [
{
"type": "sidebar-menu",
"body": [
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Dashboard"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Analytics"
}
]
}
]
}
]
}
]
},
{
"type": "sidebar-group",
"label": "Management",
"body": [
{
"type": "sidebar-menu",
"body": [
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Projects"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Team"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "sidebar-inset",
"body": [
{
"type": "div",
"className": "p-4",
"body": [
{
"type": "text",
"content": "Main content area"
}
]
}
]
}
]
}Collapsible
Collapsible Sidebar
{
"type": "sidebar-provider",
"body": [
{
"type": "sidebar",
"collapsible": "icon",
"body": [
{
"type": "sidebar-content",
"body": [
{
"type": "sidebar-group",
"body": [
{
"type": "sidebar-menu",
"body": [
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Home"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Files"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Settings"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "sidebar-inset",
"body": [
{
"type": "div",
"className": "p-4",
"body": [
{
"type": "sidebar-trigger"
},
{
"type": "text",
"content": "Main content area"
}
]
}
]
}
]
}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;
}Examples
With Badges
Sidebar with Badges
{
"type": "sidebar-provider",
"body": [
{
"type": "sidebar",
"body": [
{
"type": "sidebar-content",
"body": [
{
"type": "sidebar-group",
"body": [
{
"type": "sidebar-menu",
"body": [
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Inbox"
},
{
"type": "badge",
"content": "12",
"className": "ml-auto"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Drafts"
},
{
"type": "badge",
"content": "3",
"className": "ml-auto"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Sent"
}
]
}
]
},
{
"type": "sidebar-menu-item",
"body": [
{
"type": "sidebar-menu-button",
"body": [
{
"type": "text",
"content": "Trash"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "sidebar-inset",
"body": [
{
"type": "div",
"className": "p-4",
"body": [
{
"type": "text",
"content": "Main content area"
}
]
}
]
}
]
}