Skip to main content
Version: Next

Sidebar

Overview​

The Sidebar component is a versatile and animated navigation element that provides an elegant way to organize navigation links and actions in your application. It supports multiple positions, variants, and animations built with Framer Motion.

Preview​

Demo Window

Demo App

Installation​

npx @mindfiredigital/ignix-ui add sidebar

Usage​

Import the component:

import { Sidebar } from './components/ui';

Basic Usage​

import { Home, Settings, User, Mail } from 'lucide-react';

function BasicSidebar() {
  const links = [
    { label: 'Home', href: '/', icon: Home },
    { label: 'Profile', href: '/profile', icon: User },
    { label: 'Settings', href: '/settings', icon: Settings },
    { label: 'Contact', href: '/contact', icon: Mail },
  ];

  return (
    <Sidebar
      links={links}
      brandName="My App"
    />
  );
}

Variants​

Demo Window

Demo App

Customization​

function CustomStyledSidebar() {
  const links = [
    { label: 'Home', href: '/', icon: Home },
    { label: 'Settings', href: '/settings', icon: Settings },
  ];

  return (
    <Sidebar
      links={links}
      brandName="Custom Links"
      className="[&_a]:hover:bg-blue-500 [&_a]:transition-colors"
    />
  );
}

Responsive Sidebar​

Create a responsive sidebar that adapts to different screen sizes:

import { useState, useEffect } from 'react';

function ResponsiveSidebar() {
  const [isOpen, setIsOpen] = useState(true);

  useEffect(() => {
    const handleResize = () => {
      setIsOpen(window.innerWidth > 768);
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Sidebar
      links={links}
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      className="md:relative absolute"
    />
  );
}