DropDrawer
Responsive dropdown/drawer component for shadcn/ui
Overview
A responsive component that automatically switches between a dropdown menu on desktop and a drawer on mobile devices for shadcn/ui. A drop-in replacement for shadcn/ui's DropdownMenu component.
Why DropDrawer?
Traditional dropdown menus don't feel native on mobile devices — they can be difficult to interact with on small screens. DropDrawer solves this by:
- Automatically switching between dropdown menus on desktop
- Using a native-feeling drawer interface on mobile devices
- Providing consistent interaction patterns across all screen sizes
- Using a responsive breakpoint of 768px (configurable)
Installation
bash
pnpm dlx shadcn@latest add https://dropdrawer.jiaweing.com/r/dropdrawer.jsonComponent Mapping
| DropdownMenu | DropDrawer |
|---|---|
| DropdownMenu | DropDrawer |
| DropdownMenuTrigger | DropDrawerTrigger |
| DropdownMenuContent | DropDrawerContent |
| DropdownMenuItem | DropDrawerItem |
| DropdownMenuSub | DropDrawerSub |
Credits
- shadcn/ui by shadcn
- Vaul by emilkowalski
- Radix UI by Workos
- Credenza by redpangilinan for inspiration