ObjectUIObjectUI

Sidebar

Collapsible navigation sidebar

The Sidebar component provides a collapsible navigation sidebar for applications.

Basic Usage

Basic Sidebar

Main content area

With Groups

Grouped Sidebar

Main content area

Collapsible

Collapsible Sidebar

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

Main content area

On this page