Sidebar

Stable

A collapsible navigation sidebar with support for groupings, badges, and various visual styles.

Examples

Basic Usage

Main Content
tsx
<Sidebar className="h-full">
  <SidebarHeader>
    <div className="flex items-center gap-2">
      <div className="w-8 h-8 bg-white/10 rounded" />
      <span className="font-bold text-white">SiberUI</span>
    </div>
  </SidebarHeader>
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Menu</SidebarGroupLabel>
      <SidebarItem icon={<Home className="w-4 h-4" />} label="Dashboard" isActive />
      <SidebarItem icon={<Shield className="w-4 h-4" />} label="Security" badge={<span className="bg-rose-500 text-white text-[10px] px-1.5 py-0.5 rounded">3</span>} />
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>
    <SidebarItem icon={<LogOut className="w-4 h-4" />} label="Log out" />
  </SidebarFooter>
</Sidebar>

Neon Variant

SYSTEM OK
NO THREATS DETECTED
tsx
<Sidebar variant="neon">...</Sidebar>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for the sidebar."default" | "neon" | "glass"-
sizeWidth sizing variant."sm" | "md" | "lg"-
defaultCollapsedInitial collapse state.boolean-
isActiveWhether the item is currently active (SidebarItem prop).boolean-
badgeOptional badge to display on the right (SidebarItem prop).ReactNode-