A fully accessible, animated drawer component with nested navigation support and smooth transitions

Nested Drawer

A fully accessible drawer component with support for nested navigation menus. Features smooth animations, keyboard navigation, and focus management.

Features

Accessible: Full keyboard navigation and screen reader support
Nested Navigation: Support for multi-level menu hierarchies
Smooth Animations: Fluid transitions with respect for reduced motion preferences
Focus Management: Proper focus handling when opening/closing
Composable: Use compound components for flexible layouts
Mobile-First: Optimized for touch interactions

Installation

pnpm dlx shadcn@latest add https://attnui.com/r/nested-drawer.json

npx shadcn@latest add https://attnui.com/r/nested-drawer.json

yarn shadcn@latest add https://attnui.com/r/nested-drawer.json

bunx shadcn@latest add https://attnui.com/r/nested-drawer.json

Copy and paste the code from the GitHub repository.

Usage

import { NestedDrawer } from "@/components/nested-drawer";

const menuData = [
  {
    id: "home",
    title: "Home",
    description: "Welcome page",
    icon: HomeIcon,
    href: "#",
  },
  {
    id: "products",
    title: "Products",
    description: "Browse our products",
    icon: PackageIcon,
    children: [
      {
        id: "software",
        title: "Software",
        description: "Software solutions",
        icon: ServerIcon,
        href: "#",
      },
    ],
  },
];

export default function Example() {
  return (
    <NestedDrawer initialMenu={menuData}>
      <NestedDrawer.Trigger>
        <span>Open Menu</span>
      </NestedDrawer.Trigger>
      <NestedDrawer.Content title="Main Menu">
        <NestedDrawer.Menu />
      </NestedDrawer.Content>
    </NestedDrawer>
  );
}

API Reference

NestedDrawer

Root component that provides context for the drawer.

Prop	Type	Description
`initialMenu`	`MenuItem[]`	Initial menu items to display
`children`	`ReactNode`	Child components (Trigger, Content, etc.)

NestedDrawer.Trigger

Button that opens the drawer.

Prop	Type	Description
`children`	`ReactNode`	Button content
`className`	`string`	Additional CSS classes

NestedDrawer.Content

Container for the drawer content.

Prop	Type	Description
`title`	`string`	Accessible title for the drawer
`children`	`ReactNode`	Content to display

MenuItem

Menu item type:

type MenuItem = {
  id: string;
  title: string;
  description?: string;
  icon?: LucideIcon;
  children?: MenuItem[];
  href?: string;
};

Accessibility

Keyboard Navigation: Full keyboard support with Tab, Enter, Space, and Escape keys
Focus Management: Automatic focus on first interactive element when opened
Screen Readers: Proper ARIA labels and roles
Reduced Motion: Respects prefers-reduced-motion user preference

Dependencies

motion - For smooth animations
lucide-react - For icons (optional)
next/link - For navigation (can be replaced)

Nested Drawer

On this page