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

Preview

Demo Window

Demo App

Code

import { Sidebar } from './components/ui';
import { Home, User, Settings, HelpCircle } from 'lucide-react';

function SidebarDemo() {
  const links = [
    { label: 'Home', href: '#', icon: Home },
    { label: 'Profile', href: '#', icon: User },
    { label: 'Settings', href: '#', icon: Settings },
    { label: 'Help', href: '#', icon: HelpCircle },
  ];

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

Installation

npm

npx @mindfiredigital/ignix-ui add sidebar

yarn

yarn @mindfiredigital/ignix-ui add sidebar

pnpm

pnpm @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

Preview

Demo Window

Demo App

Code

import { Sidebar, SidebarProvider } from '@ignix-ui/sidebar';
import {
  HomeIcon,
  PersonIcon,
  GearIcon,
  QuestionMarkCircledIcon,
} from "@radix-ui/react-icons";

function Example(){
  return (
    <SidebarProvider>
      <Sidebar
        links={[
          { label: 'Home',     href: '#', icon: HomeIcon },
          { label: 'Profile',  href: '#', icon: PersonIcon },
          { label: 'Settings', href: '#', icon: GearIcon },
          { label: 'Help',     href: '#', icon: QuestionMarkCircledIcon },
        ]}
      brandName="Demo App"
      variant="default"
      position="left"
      />
    </SidebarProvider>
  );
}

Customization

With Custom Link Styling

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"
    />
  );
}