Sidebar

Stable

Collapsible multi-level navigation rail and app sidebar supporting icon-only minimized states, neon active borders, notification badges, and glassmorphic panels.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Sidebar, 
  SidebarHeader, 
  SidebarContent, 
  SidebarFooter, 
  SidebarGroup, 
  SidebarGroupLabel, 
  SidebarItem, 
  SidebarSeparator, 
  SidebarCollapseButton,
  useSidebar 
} from '@siberui/react';

Basic Usage & Navigation Architecture

The sidebar includes composable headers, scrollable groups, item badges, separators, and collapse triggers that automatically adjust widths and hide labels.

MAIN VIEWPORT CANVAS

tsx

<div className="h-[460px] flex border border-white/[0.06] rounded-xl overflow-hidden shadow-2xl">
  <Sidebar>
    <SidebarHeader>
      <div className="flex items-center gap-2">
        <div className="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center font-bold text-xs text-white">
          SU
        </div>
        <span className="font-bold text-white text-sm">Siber UI</span>
      </div>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>CORE APPLICATION</SidebarGroupLabel>
        <SidebarItem icon={<Home className="w-4 h-4" />} label="Dashboard" isActive />
        <SidebarItem
          icon={<Shield className="w-4 h-4" />}
          label="Defense Shield"
          badge={<Badge variant="destructive" size="sm">3</Badge>}
        />
        <SidebarItem icon={<User className="w-4 h-4" />} label="Personnel" />
      </SidebarGroup>
      <SidebarSeparator />
      <SidebarGroup>
        <SidebarGroupLabel>SYSTEM PREFERENCES</SidebarGroupLabel>
        <SidebarItem icon={<Settings className="w-4 h-4" />} label="Configurations" />
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <SidebarCollapseButton className="w-full justify-center mb-2" />
      <SidebarItem icon={<LogOut className="w-4 h-4 text-rose-400" />} label="Terminate Session" />
    </SidebarFooter>
  </Sidebar>

  <div className="flex-1 bg-[#050811] p-6 flex flex-col items-center justify-center text-slate-500 font-mono text-xs">
    MAIN VIEWPORT CANVAS
  </div>
</div>

Neon Cybernetic Mission Control Sidebar

Pass variant="neon" to apply cyan laser borders, glowing active tabs with left accent bars, and monospace section labels.

> MISSION TELEMETRY LIVE
ALL SYSTEMS NOMINAL

tsx

<div className="h-[460px] flex border border-cyan-500/20 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(0,240,255,0.05)]">
  <Sidebar variant="neon" defaultCollapsed>
    <SidebarHeader>
      <div className="flex items-center justify-center">
        <div className="w-8 h-8 rounded-lg bg-cyan-950/80 border border-cyan-400 flex items-center justify-center font-mono text-xs font-bold text-cyan-300 shadow-[0_0_12px_rgba(0,240,255,0.4)]">
          SYS
        </div>
      </div>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarItem icon={<Terminal className="w-4 h-4" />} label="ROUTINES" isActive />
        <SidebarItem icon={<Activity className="w-4 h-4" />} label="TELEMETRY" />
        <SidebarItem icon={<Cpu className="w-4 h-4" />} label="HARDWARE" />
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <SidebarCollapseButton className="mx-auto" />
    </SidebarFooter>
  </Sidebar>

  <div className="flex-1 bg-[#03060d] p-6 flex flex-col items-center justify-center font-mono text-cyan-500/60 text-xs text-center">
    &gt; MISSION TELEMETRY LIVE&lt;br /&gt;ALL SYSTEMS NOMINAL
  </div>
</div>

Frosted Cyber-Glass Navigation Rail

Layered acrylic sidebar over circuit textures with perimeter laser sweeps.

ORBITAL SENSOR FEED

tsx

<div className="relative w-full max-w-2xl h-[420px] rounded-2xl border border-white/10 bg-white/[0.03] backdrop-blur-xl flex overflow-hidden shadow-2xl">
  <Sidebar variant="glass">
    <SidebarHeader>
      <span className="font-mono text-xs font-bold text-white tracking-wider">VESSEL ARRAY</span>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarItem icon={<Radio className="w-4 h-4 text-cyan-400" />} label="Transponder" isActive />
        <SidebarItem icon={<Activity className="w-4 h-4 text-emerald-400" />} label="Carrier Link" />
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <div className="flex-1 bg-black/40 p-6 flex items-center justify-center font-mono text-xs text-slate-400">
    ORBITAL SENSOR FEED
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Command Vessel Shell

Full mission cockpit frame with compact telemetry sidebar.

> MISSION VECTOR VERIFIED

tsx

<div className="h-[440px] flex border border-cyan-500/30 rounded-2xl overflow-hidden bg-[#070b14] shadow-2xl">
  <Sidebar variant="neon">
    <SidebarHeader>
      <div className="flex items-center justify-between">
        <span className="font-mono text-xs font-bold text-cyan-400">SENTINEL-09</span>
        <Badge variant="neon" size="sm">ONLINE</Badge>
      </div>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarItem icon={<Radio className="w-4 h-4" />} label="COMM ARRAY" isActive />
        <SidebarItem icon={<Cpu className="w-4 h-4" />} label="PROPULSION" />
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <div className="flex-1 p-6 flex items-center justify-center font-mono text-xs text-emerald-400">
    &gt; MISSION VECTOR VERIFIED
  </div>
</div>

API Reference

PROPERTIES (4)← swipe to inspect →

Property	Description	Type	Default
variant	Visual style for Sidebar, Items, and Group labels.	"default" \| "neon" \| "glass"	"default"
size	Width scale when expanded and collapsed.	"sm" \| "md" \| "lg"	"md"
defaultCollapsed	Initial minimized rail mode state.	boolean	false
onCollapsedChange	Callback when collapse button is toggled.	(collapsed: boolean) => void	-

Accessibility

Landmark & ARIA: Renders inside an HTML5 <aside> element with aria-current="page" on active links.

Best Practices

Responsive Toggle: Use SidebarCollapseButton or hook into useSidebar() to toggle between expanded labels and compact icon rail views.