React Collapsible Sidebar

A highly customizable, responsive collapsible sidebar component for React applications. Perfect for navigation menus, admin dashboards, and application layouts with zero dependencies.

Installation

npm install @aniruddha1806/react-collapsible-sidebar

Features

• 🔄 Smooth expand/collapse animations
• 🎨 Fully customizable colors and styling
• 📱 Responsive design with configurable widths
• 🏷️ Badge support for menu items
• 🎯 Active state management
• 🖱️ Hover effects and interactions
• ♿ Accessibility features with ARIA labels
• 🪶 Zero dependencies and lightweight
• 📦 TypeScript support with full type definitions

Quick Start

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Settings, User, Mail } from 'lucide-react';

function App() {
  const menuItems = [
    {
      icon: Home,
      label: 'Dashboard',
      href: '/dashboard',
      active: true
    },
    {
      icon: User,
      label: 'Profile',
      href: '/profile'
    },
    {
      icon: Mail,
      label: 'Messages',
      href: '/messages',
      badge: 5
    },
    {
      icon: Settings,
      label: 'Settings',
      href: '/settings'
    }
  ];

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <CollapsibleSidebar
        header={<h2>My App</h2>}
        menuItems={menuItems}
        footer={<p>© 2024 My App</p>}
      />
      <main style={{ flex: 1, padding: '20px' }}>
        {/* Your main content */}
      </main>
    </div>
  );
}

Props

CollapsibleSidebarProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | header | ReactNode | undefined | Content displayed in the sidebar header | | footer | ReactNode | undefined | Content displayed in the sidebar footer | | menuItems | SidebarMenuItem[] | [] | Array of menu items to display | | defaultExpanded | boolean | true | Initial expanded state of the sidebar | | onToggle | (expanded: boolean) => void | undefined | Callback when sidebar is toggled | | expandedWidth | string | "240px" | Width when sidebar is expanded | | collapsedWidth | string | "64px" | Width when sidebar is collapsed | | backgroundColor | string | "#ffffff" | Background color of the sidebar | | textColor | string | "#333333" | Default text color | | activeBackgroundColor | string | "#f3f4f6" | Background color for active items | | activeTextColor | string | "#000000" | Text color for active items | | hoverBackgroundColor | string | "#f9fafb" | Background color on hover | | hoverTextColor | string | "#000000" | Text color on hover | | borderColor | string | "#e5e7eb" | Border color for separators | | iconColor | string | "#6b7280" | Default icon color | | badgeBackgroundColor | string | "#3b82f6" | Background color for badges | | badgeTextColor | string | "#ffffff" | Text color for badges |

SidebarMenuItem

| Prop | Type | Default | Description | |------|------|---------|-------------| | icon | React.ElementType | required | Icon component to display | | label | string | required | Text label for the menu item | | onClick | () => void | undefined | Click handler for the menu item | | href | string | undefined | URL for navigation (creates a link) | | active | boolean | false | Whether the item is currently active | | badge | string \\| number | undefined | Badge content to display |

Examples

Basic Sidebar

Simple sidebar with navigation items:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings } from 'lucide-react';

function BasicSidebar() {
  const menuItems = [
    { icon: Home, label: 'Home', href: '/' },
    { icon: Users, label: 'Users', href: '/users' },
    { icon: Settings, label: 'Settings', href: '/settings' }
  ];

  return (
    <CollapsibleSidebar   header={<h2>My App</h2>} menuItems={menuItems} />
  );
}

Dark Theme Sidebar

Customize colors for a dark theme:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings, Bell } from 'lucide-react';

function DarkSidebar() {
  const menuItems = [
    { icon: Home, label: 'Dashboard', active: true },
    { icon: Users, label: 'Users' },
    { icon: Bell, label: 'Notifications', badge: 3 },
    { icon: Settings, label: 'Settings' }
  ];

  return (
    <div className='h-screen'>

    
   <CollapsibleSidebar
      menuItems={menuItems}
      header={<h2 className='text-white'>My App</h2>}
      backgroundColor="#1f2937"
      textColor="#d1d5db"
      activeBackgroundColor="#374151"
      activeTextColor="#ffffff"
      hoverBackgroundColor="#374151"
      hoverTextColor="#ffffff"
      borderColor="#374151"
      iconColor="#9ca3af"
      badgeBackgroundColor="#ef4444"
      badgeTextColor="#ffffff"
       footer={<p className='text-white'>© 2024 My App</p>}
    />
    </div>
  );
}

With Header and Footer

Add custom header and footer content:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings, LogOut } from 'lucide-react';

function SidebarWithHeaderFooter() {
  const menuItems = [
    { icon: Home, label: 'Dashboard', href: '/dashboard' },
    { icon: User, label: 'Users', href: '/users' },
    { icon: Settings, label: 'Settings', href: '/settings' }
    
  ];

  const header = (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <img src="Any..." alt="Logo" style={{ width: '24px', height: '24px' }} />
      <span style={{ fontWeight: 'bold' }}>MyApp</span>
    </div>
  );

  const footer = (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <LogOut className='cursor-pointer' size={16} />
      <span>Logout</span>
    </div>
  );

  
  return (
    <div className='h-screen'>

    
   <CollapsibleSidebar
      header={header}
      footer={footer}
      menuItems={menuItems}
    />
    </div>
  );
}

Admin Dashboard Sidebar

Complete admin dashboard with badges and active states:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { LayoutDashboard, Users, ShoppingCart, Package, BarChart3, Settings, Bell, Mail } from 'lucide-react';

function AdminSidebar() {
   const [activeItem, setActiveItem] = useState('dashboard');

  const menuItems = [
    {
      icon: LayoutDashboard,
      label: 'Dashboard',
      onClick: () => setActiveItem('dashboard'),
      active: activeItem === 'dashboard'
    },
    {
      icon: Users,
      label: 'Users',
      onClick: () => setActiveItem('users'),
      active: activeItem === 'users',
      badge: 12
    },
    {
      icon: ShoppingCart,
      label: 'Orders',
      onClick: () => setActiveItem('orders'),
      active: activeItem === 'orders',
      badge: 5
    },
    {
      icon: Package,
      label: 'Products',
      onClick: () => setActiveItem('products'),
      active: activeItem === 'products'
    },
    {
      icon: BarChart3,
      label: 'Analytics',
      onClick: () => setActiveItem('analytics'),
      active: activeItem === 'analytics'
    },
    {
      icon: Mail,
      label: 'Messages',
      onClick: () => setActiveItem('messages'),
      active: activeItem === 'messages',
      badge: 'New'
    },
    {
      icon: Bell,
      label: 'Notifications',
      onClick: () => setActiveItem('notifications'),
      active: activeItem === 'notifications',
      badge: 99
    },
    {
      icon: Settings,
      label: 'Settings',
      onClick: () => setActiveItem('settings'),
      active: activeItem === 'settings'
    }
  ];

  const handleToggle = (expanded) => {
    console.log('Sidebar expanded:', expanded);
  };

  return (
    <CollapsibleSidebar
      header={
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px',position:'relative' }}>
          <div style={{ 
            width: '32px', 
            height: '32px', 
            backgroundColor: '#3b82f6', 
            borderRadius: '8px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontWeight: 'bold'
          }}>
            A
          </div>
          <span style={{ fontWeight: 'bold', fontSize: '18px' }}>Admin Panel</span>
        </div>
      }
      footer={
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '8px',
          padding: '8px',
          backgroundColor: '#f3f4f6',
          borderRadius: '8px',
          bottom:'10px',
          position:'absolute'
        }}>
          <div style={{ 
            width: '24px', 
            height: '24px', 
            backgroundColor: '#10b981', 
            borderRadius: '50%' 
          }} />
          <span style={{ fontSize: '14px' }}>John Doe</span>
        </div>
      }
      menuItems={menuItems}
      onToggle={handleToggle}
      expandedWidth="280px"
      collapsedWidth="72px"
    />);
}

TypeScript Usage

The component provides full TypeScript support:

import { 
  CollapsibleSidebar, 
  SidebarMenuItem, 
  CollapsibleSidebarProps 
} from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings } from 'lucide-react';

interface AppSidebarProps {
  userRole: 'admin' | 'user';
}

const AppSidebar: React.FC<AppSidebarProps> = ({ userRole }) => {
  const menuItems: SidebarMenuItem[] = [
    {
      icon: Home,
      label: 'Dashboard',
      href: '/dashboard',
      active: true
    },
    {
      icon: Users,
      label: 'Users',
      href: '/users',
      // Only show for admin
      ...(userRole === 'admin' && { badge: 'Admin' })
    },
    {
      icon: Settings,
      label: 'Settings',
      onClick: () => console.log('Settings clicked')
    }
  ];

  const handleToggle = (expanded: boolean): void => {
    console.log('Sidebar toggled:', expanded);
  };

  const sidebarProps: CollapsibleSidebarProps = {
    menuItems,
    onToggle: handleToggle,
    defaultExpanded: true,
    backgroundColor: '#ffffff',
    textColor: '#333333'
  };

  return <CollapsibleSidebar {...sidebarProps} />;
};

Styling

The component uses inline styles for maximum compatibility and doesn't require any CSS imports. All styling is controlled through props, making it easy to integrate with any design system.

Responsive Design

The sidebar automatically handles responsive behavior. You can customize the widths for different screen sizes:

<CollapsibleSidebar
  expandedWidth="280px"    // Desktop expanded width
  collapsedWidth="64px"    // Desktop collapsed width
  menuItems={menuItems}
/>