Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Left Drawer with Search for React

A left drawer with a search field, a Main Menu of Home, Team, and Documents, and a Settings group.

A search field leads the panel. Main Menu lists Home, Team, and Documents, and Settings lists Preferences. The title Navigation is hidden, since the field leads.

Use it when a long phone menu needs a filter. On a desktop, put that search in a Sidebar. In React, Base UI does not filter the links.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="left">
  <DrawerTrigger
    render={
      <Button aria-label="Open navigation" size="icon-md" variant="outline" />
    }
  >
    <MenuIcon aria-hidden="true" />
  </DrawerTrigger>
  <DrawerContent>
    <DrawerTitle className="sr-only">Navigation</DrawerTitle>
    <div className="flex flex-col gap-4 p-4">
      <InputGroup>
        <InputGroupInput
          aria-label="Search"
          placeholder="Search..."
          type="search"
        />
        <InputGroupAddon>
          <SearchIcon aria-hidden="true" />
        </InputGroupAddon>
      </InputGroup>
      <div className="flex flex-col gap-2">
        <h3 className="font-medium text-muted-foreground text-xs uppercase">
          Main Menu
        </h3>
        <nav aria-label="Main menu" className="flex flex-col gap-1">
          <Button className="justify-start" variant="ghost">
            <HomeIcon aria-hidden="true" data-icon="inline-start" />
            Home
          </Button>
          <Button className="justify-start" variant="ghost">
{/* The rest of the file is under Installation. */}

FAQ

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.

How is the menu button labeled?

An outline icon button opens the drawer. Its aria-label, Open navigation, is the accessible name; the icon is aria-hidden. The Button goes in the render prop of DrawerTrigger.

How does the drawer open from the left?

swipeDirection="left" on Drawer puts it on the left edge. The prop names the swipe that closes the drawer, so left docks it on the left; leave it out for a bottom drawer.

API Reference

Drawer

Sets swipeDirection="left". The rest is on the Drawer page.

Button

Sets aria-label="Open navigation", size="icon-md", variant="outline" and variant="ghost". The rest is on the Button page.

Input Group

Sets aria-label="Search", placeholder="Search..." and type="search". The rest is on the Input Group page.

All 22 drawer examples