Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Left Drawer with Search
A left drawer with search Input at top and grouped navigation sections using uppercase headings and Lucide icons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Large apps need findable navigation—search filters help users locate sections quickly. This React left drawer combines shadcn/ui components featuring Search icon Input with pl-9 padding, uppercase text-xs section headings, and icon navigation buttons organized in space-y-4 groups. Built with relative positioning for icon overlay and ghost button variants. The searchable navigation pattern improves discoverability—perfect for enterprise apps, documentation sites, large dashboards, or anywhere extensive navigation needs quick filtering preventing endless scrolling through menu items.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Left Navigation Menu
Icon navigation without search
Nested Left Drawer
Expandable menu sections
Command Dialog
Keyboard-first command palette
Input Component
Search input field
Simple Left Drawer
Basic left drawer
Combobox Component
Searchable select
Questions you might have
React Left Drawer with Nested Items
A left drawer with nested expandable menu sections using ChevronRight rotation and useState for Products and Orders submenus
React Left Drawer File Explorer
A left drawer file explorer with expandable folders using Folder and File icons, ChevronRight rotation, and nested structure