Shadcn.io is not affiliated with official shadcn/ui
Simple Left Drawer
A React left drawer sliding from screen left with Menu icon trigger for navigation and sidebar content using shadcn/ui Drawer
Desktop navigation needs accessibility—left drawers provide mobile-style slide-in menus on larger screens too. This React left drawer uses shadcn/ui Drawer with direction equals left prop and Menu icon from Lucide React creating hamburger menu pattern. Built with Vaul handling left-side animation and DrawerContent components from Radix UI. The left drawer pattern improves navigation density—perfect for app sidebars, navigation menus, settings panels, or anywhere content needs temporary side overlay without permanent sidebar space consumption.
Simple Left Drawer preview
Installation
Related Components
Bottom Drawer
Drawer from screen bottom
Left Navigation Menu
Icon navigation in left drawer
Sheet Component
Alternative side panel
Sidebar Navigation
Permanent sidebar component
Left Drawer Search
Searchable navigation menu
Standard Dialog
Centered modal
FAQ
Was this page helpful?
Sign in to leave feedback.
Bottom Drawer Event Details
A bottom drawer displaying rich event details with Badge tags, Lucide icons for date, location, and attendees in mobile sheet format
Left Drawer Navigation Menu
A left drawer navigation menu with icon buttons for Home, Team, Projects, Settings, and Help using Lucide React icons