Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Left Drawer Navigation Menu
A left drawer navigation menu with icon buttons for Home, Team, Projects, Settings, and Help using Lucide React icons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Navigation drawers organize app sections—icon menus provide clear visual categories. This React left drawer uses shadcn/ui Drawer with direction left featuring Button components with ghost variant for nav items and Lucide icons (Home, Users, FileText, Settings, HelpCircle). Built with justify-start alignment and w-full buttons creating clickable navigation list. The icon navigation pattern improves scannability—perfect for app navigation, dashboard menus, admin panels, or anywhere multiple sections need organized sidebar access with recognizable icons.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Left Drawer
Basic left drawer structure
Nested Left Drawer
Collapsible nested menu items
Sidebar Navigation
Permanent sidebar component
Left Drawer Search
Searchable navigation
Navigation Buttons
Grouped navigation controls
Bottom Drawer
Drawer from bottom
Questions you might have
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
React Left Drawer with Nested Items
A left drawer with nested expandable menu sections using ChevronRight rotation and useState for Products and Orders submenus