https://github.com/thatbeautifuldream/nested-menu-drawer
A fully accessible, animated drawer component for React with nested navigation support, smooth transitions, and keyboard shortcuts.
https://github.com/thatbeautifuldream/nested-menu-drawer
framer-motion micro-interactions nested-drawer vaul
Last synced: about 1 month ago
JSON representation
A fully accessible, animated drawer component for React with nested navigation support, smooth transitions, and keyboard shortcuts.
- Host: GitHub
- URL: https://github.com/thatbeautifuldream/nested-menu-drawer
- Owner: thatbeautifuldream
- Created: 2025-10-17T05:49:10.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-17T08:05:20.000Z (8 months ago)
- Last Synced: 2025-11-01T16:06:11.034Z (8 months ago)
- Topics: framer-motion, micro-interactions, nested-drawer, vaul
- Language: TypeScript
- Homepage: https://nested-drawer.milind.app
- Size: 83 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nested Menu Drawer
A fully accessible, animated drawer component for React with nested navigation support, smooth transitions, and keyboard shortcuts.
> [!Note]
> Deployed : https://nested-drawer.milind.app
## Features
- Direction-aware navigation with smooth slide animations
- Automatic height transitions between menu levels
- Keyboard accessible (Tab, Escape, Cmd/Ctrl+K)
- Compound component pattern for flexible composition
- TypeScript support
- Built with Framer Motion and Tailwind CSS
## Usage
```tsx
import { NestedDrawer, TMenuItem } from "@/components/nested-drawer";
const menuData: TMenuItem[] = [
{
id: "home",
title: "Home",
description: "Go to homepage",
icon: ,
onClick: () => console.log("Home clicked"),
},
{
id: "products",
title: "Products",
description: "Browse products",
icon: ,
children: [
{
id: "software",
title: "Software",
icon: ,
onClick: () => console.log("Software clicked"),
},
],
},
];
function App() {
return (
Open Menu
);
}
```
## API
### NestedDrawer
Main container component.
- `initialMenu`: Array of menu items to display
- `children`: Compound components (Trigger, Content)
### TMenuItem
```ts
type TMenuItem = {
id: string; // Unique identifier
title: string; // Display text
description?: string; // Optional subtitle
icon?: React.ReactNode; // Optional icon
children?: TMenuItem[]; // Nested menu items
onClick?: () => void; // Action when clicked (leaf items)
};
```
### Components
- `NestedDrawer.Trigger`: Button to open the drawer
- `NestedDrawer.Content`: Drawer overlay and container
- `NestedDrawer.Menu`: Renders the current menu level
### Keyboard Shortcuts
- `Cmd+K` or `Ctrl+K`: Open drawer
- `Escape`: Go back one level or close drawer
- `Tab` / `Shift+Tab`: Navigate between items
- `Enter` / `Space`: Select item