SidebarMenu

A collapsible sidebar navigation component with support for sections, submenus, icons, and light/dark themes.

Import


import { SidebarMenu, SidebarMenuSection, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubItem } from "@raydenui/ui";

Usage

Basic


<SidebarMenu>
  <SidebarMenuItem icon={<HomeIcon />} href="/">
    Dashboard
  </SidebarMenuItem>
  <SidebarMenuItem icon={<UsersIcon />} href="/users">
    Users
  </SidebarMenuItem>
  <SidebarMenuItem icon={<CogIcon />} href="/settings">
    Settings
  </SidebarMenuItem>
</SidebarMenu>

With Sections


<SidebarMenu>
  <SidebarMenuSection title="Main">
    <SidebarMenuItem icon={<HomeIcon />} href="/">
      Dashboard
    </SidebarMenuItem>
    <SidebarMenuItem icon={<ChartBarIcon />} href="/analytics">
      Analytics
    </SidebarMenuItem>
  </SidebarMenuSection>
 
  <SidebarMenuSection title="Management">
    <SidebarMenuItem icon={<UsersIcon />} href="/users">
      Users
    </SidebarMenuItem>
    <SidebarMenuItem icon={<FolderIcon />} href="/projects">
      Projects
    </SidebarMenuItem>
  </SidebarMenuSection>
</SidebarMenu>

With Submenus


<SidebarMenu>
  <SidebarMenuItem icon={<HomeIcon />} href="/">
    Dashboard
  </SidebarMenuItem>
  <SidebarMenuSub icon={<CogIcon />} label="Settings">
    <SidebarMenuSubItem href="/settings/profile">Profile</SidebarMenuSubItem>
    <SidebarMenuSubItem href="/settings/security">Security</SidebarMenuSubItem>
    <SidebarMenuSubItem href="/settings/notifications">Notifications</SidebarMenuSubItem>
  </SidebarMenuSub>
</SidebarMenu>

With Badges


<SidebarMenu>
  <SidebarMenuItem icon={<InboxIcon />} badge={5} href="/inbox">
    Inbox
  </SidebarMenuItem>
  <SidebarMenuItem icon={<BellIcon />} badge="New" href="/notifications">
    Notifications
  </SidebarMenuItem>
</SidebarMenu>

Collapsible


const [collapsed, setCollapsed] = useState(false);
 
<SidebarMenu collapsed={collapsed}>
  <SidebarMenuItem icon={<HomeIcon />} href="/">
    Dashboard
  </SidebarMenuItem>
  {/* Icons only shown when collapsed */}
</SidebarMenu>
 
<button onClick={() => setCollapsed(!collapsed)}>
  Toggle Sidebar
</button>

Themes


// Light theme (default)
<SidebarMenu theme="light">
  {/* ... */}
</SidebarMenu>
 
// Dark theme
<SidebarMenu theme="dark">
  {/* ... */}
</SidebarMenu>

Props

SidebarMenu

Prop	Type	Default	Description
`collapsed`	`boolean`	`false`	Collapsed state
`theme`	`"light" \| "dark"`	`"light"`	Color theme
`className`	`string`	—	Additional CSS classes

SidebarMenuSection

Prop	Type	Default	Description
`title`	`string`	—	Section title
`className`	`string`	—	Additional CSS classes

SidebarMenuItem

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Leading icon
`href`	`string`	—	Link URL
`active`	`boolean`	`false`	Active state
`badge`	`number \| string`	—	Badge content
`onClick`	`() => void`	—	Click handler
`className`	`string`	—	Additional CSS classes

SidebarMenuSub

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Leading icon
`label`	`string`	—	Submenu label (required)
`defaultOpen`	`boolean`	`false`	Initially expanded
`className`	`string`	—	Additional CSS classes

Accessibility

Uses semantic <nav> element
Keyboard navigation support
Expandable sections with proper ARIA
Active items properly indicated