Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Simple Left Drawer
A React left drawer sliding from screen left with Menu icon trigger for navigation and sidebar content using shadcn/ui Drawer
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React 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
React Left Drawer Navigation Menu
A left drawer navigation menu with icon buttons for Home, Team, Projects, Settings, and Help using Lucide React icons