Shadcn.io is not affiliated with official shadcn/ui
Left Drawer with Search
A left drawer with search Input at top and grouped navigation sections using uppercase headings and Lucide icons
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.
Left Drawer with Search preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Left Drawer with Nested Items
A left drawer with nested expandable menu sections using ChevronRight rotation and useState for Products and Orders submenus
Left Drawer File Explorer
A left drawer file explorer with expandable folders using Folder and File icons, ChevronRight rotation, and nested structure