Nested Drawer Menu

An accessible, animated, and customizable nested drawer navigation component built for React and Next.js applications.

Usage

To start using the library, install it in your project:

npm i nested-drawer-menu

Use the drawer in your app:

"use client";

import DrawerMenu from "nested-drawer-menu";
import { menuData } from "@/lib/data";

export default function Example() {
  return (
    <DrawerMenu data={menuData}>
      <DrawerMenu.Trigger asChild>
        <button>Open Menu</button>
      </DrawerMenu.Trigger>
    </DrawerMenu>
  );
}

Example data:

import { Home, Mail } from "lucide-react";

export const menuData = [
  {
    icon: Home,
    title: "Home",
    description: "Welcome to our comprehensive platform",
    link: "/", // opens in the same tab
    external: false,
  },
  {
    icon: Briefcase,
    title: "Products & Services",
    description: "Explore our comprehensive offerings",
    children: [
      {
        icon: ClipboardCheck,
        title: "Consulting Services",
        description: "Expert guidance and strategic support",
        children: [
          // nested menu items
          {
            icon: CodeIcon,
            title: "Technical Consulting",
            description: "Architecture and implementation guidance",
          },
          {
            icon: TrendingUp,
            title: "Business Strategy",
            description: "Digital transformation and business planning",
          },
          {
            icon: GraduationCap,
            title: "Training & Workshops",
            description: "Team skill development and knowledge transfer",
            children: [
              {
                icon: CodeIcon,
                title: "Technical Training",
                description: "Programming and technology skills",
              },
              {
                icon: Target,
                title: "Agile Methodologies",
                description: "Scrum, Kanban, and agile practices",
              },
              {
                icon: Users,
                title: "Leadership & Management",
                description: "Technical leadership and team management",
              },
            ],
          },
        ],
      },
      {
        icon: Lightbulb,
        title: "Digital Transformation",
        description: "Comprehensive digital transformation strategies",
      },
      {
        icon: BarChart3,
        title: "Data & Analytics Consulting",
        description: "Data strategy, analytics, and business intelligence",
      },
      {
        icon: Wrench,
        title: "Support & Maintenance",
        description: "Proactive maintenance and technical support services",
      },
    ],
  },
  {
    icon: Mail,
    title: "Contact",
    description: "Get in touch with our team",
    link: "https://srajan.vercel.app",
    external: true, // opens in new tab
  },
];