Sidebar Component

A collapsible sidebar navigation component with icons, badges, and tooltips. Perfect for app navigation and dashboard layouts.

Basic Sidebar

Main content area

<Sidebar 
  items={[
    { label: "Dashboard", href: "/", active: true },
    { label: "Artists", href: "/artists" },
    { label: "Analytics", href: "/analytics" },
    { label: "Settings", href: "/settings" }
  ]}
/>

With Icons

Main content area (icons removed for demo compatibility)

<Sidebar 
  items={[
    { 
      label: "Dashboard", 
      href: "/",
      icon: <HomeIcon />,
      active: true
    },
    { 
      label: "Artists", 
      href: "/artists",
      icon: <UsersIcon />
    },
    // ... more items
  ]}
/>

With Badges

Main content area

<Sidebar 
  items={[
    { label: "Dashboard", href: "/", icon: <HomeIcon />, active: true },
    { label: "Messages", href: "/messages", icon: <MailIcon />, badge: 5 },
    { label: "Notifications", href: "/notifications", icon: <BellIcon />, badge: "99+" },
    { label: "Tasks", href: "/tasks", icon: <ClipboardIcon />, badge: "New" }
  ]}
/>

Collapsible Sidebar

Main content area

const [collapsed, setCollapsed] = useState(false);

<Sidebar 
  items={navigationItems}
  collapsed={collapsed}
  onToggle={() => setCollapsed(!collapsed)}
/>

Collapsed State

When collapsed, hover over icons to see tooltips with labels and badges.

Collapsed Features:

Icons remain visible
Labels are hidden
Badges appear as small dots on the icon
Hovering shows tooltip with label and full badge

Props Reference

Prop	Type	Default	Description
items	NavItem[]	required	Navigation menu items
collapsed	boolean	false	Whether sidebar is collapsed
onToggle	() => void	undefined	Toggle callback (shows toggle button if provided)
className	string	undefined	Additional CSS classes

NavItem Interface

interface NavItem {
  label: string;
  href: string;
  icon?: React.ReactNode;
  active?: boolean;
  badge?: string | number;
}