shadcn.io is not affiliated with official shadcn/ui
Drawer examples · Left
Left Drawer with Search for React
A left drawer with a search field above Main Menu and Settings groups of navigation buttons.
Navigation with a search field on top. The field is an Input Group with a search icon, and the items sit under two small headings, Main Menu and Settings, each its own labeled nav. The drawer's title is visually hidden, since the search field leads the panel.
Preview
Installation
FAQ
How is the search field built?
An InputGroup with an InputGroupInput of type="search" and aria-label="Search", and an InputGroupAddon holding the icon. The addon comes after the input in the markup so clicking it focuses the field; it still shows at the start.
Does the search filter the items?
Not in this demo: the input is uncontrolled. Keep the query in state and hide the items whose label doesn't match, or send it to your search page.
How are the groups marked up?
Each group has a small uppercase heading and its own nav with an aria-label, Main menu and Settings, so screen readers list them as separate landmarks.
Why is the title hidden?
DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading. Here it reads Navigation and has sr-only, so the search field sits at the top.
Related
- Left Drawer Navigation MenuA left drawer with a navigation menu of
- Left Drawer with Nested ItemsA left drawer menu whose Products and
- Simple Command DialogA button that opens a command dialog with
- Input with LabelA text input with a label above it
- Simple Left DrawerA drawer that slides in from the left
- Simple Single Select ComboboxA single-select combobox that opens from