Skip to content

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

Free

Left Drawer with Search for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not filter the links.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Drawer swipeDirection="left">
  <DrawerTrigger :asChild="true">
    <Button aria-label="Open navigation" size="icon-md" variant="outline">
      <MenuIcon aria-hidden="true" />
    </Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <DrawerTitle class="sr-only">Navigation</DrawerTitle>
    <div class="flex flex-col gap-4 p-4">
      <InputGroup>
        <InputGroupInput aria-label="Search" placeholder="Search..." type="search" />
        <InputGroupAddon><SearchIcon aria-hidden="true" /></InputGroupAddon>
      </InputGroup>
      <div class="flex flex-col gap-2">
        <h3 class="font-medium text-muted-foreground text-xs uppercase">Main Menu</h3>
        <nav aria-label="Main menu" class="flex flex-col gap-1">
          <Button class="justify-start" variant="ghost">
            <HomeIcon aria-hidden="true" data-icon="inline-start" />Home
          </Button>
          <Button class="justify-start" variant="ghost">
            <UsersIcon aria-hidden="true" data-icon="inline-start" />Team
          </Button>
          <Button class="justify-start" variant="ghost">
            <FileTextIcon aria-hidden="true" data-icon="inline-start" />Documents
          </Button>
        </nav>
      </div>
      <div class="flex flex-col gap-2">
        <h3 class="font-medium text-muted-foreground text-xs uppercase">Settings</h3>
        <nav aria-label="Settings" class="flex flex-col gap-1">
          <Button class="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. DrawerTrigger takes asChild and merges onto the one Button inside it.

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" and asChild. 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