Skip to content

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

Free

Simple Left Drawer for Vue

A menu button opens a left drawer titled Menu, with a short description and a Close button.

UI library: Ark UI

A menu button opens a panel from the left titled Menu. It has a short description, one line about navigation, and Close.

Use it for navigation on a small screen. On a wide layout, keep those links in a Sidebar. In Vue, Ark UI closes it when the panel is swiped away.

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 menu" size="icon-md" variant="outline">
      <MenuIcon aria-hidden="true" />
    </Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <DrawerHeader>
      <DrawerTitle>Menu</DrawerTitle>
      <DrawerDescription>This drawer slides in from the left side.</DrawerDescription>
    </DrawerHeader>
    <div class="p-4">
      <p class="text-muted-foreground text-sm">
        Left-side drawers are commonly used for navigation menus and sidebars.
      </p>
    </div>
    <DrawerFooter>
      <DrawerClose :asChild="true">
        <Button variant="outline">Close</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

FAQ

How does this 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.

How is the menu button labeled?

An outline icon button opens the drawer. Its aria-label, Open menu, is the accessible name; the icon is aria-hidden. DrawerTrigger takes asChild and merges onto the one Button inside it.

What's inside the panel?

DrawerHeader with the title Menu and the description This drawer slides in from the left side, one paragraph, and DrawerFooter with a Close button.

How does Close work?

It's a DrawerClose, so it dismisses the drawer. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger. DrawerClose takes asChild and merges onto the Button inside it.

Is there a drag bar?

No. A side or top drawer still follows a swipe, but it doesn't draw the bar. showBar={false} on DrawerContent hides it.

How wide is the left drawer?

It fills the height and caps its width, so on a phone it covers most of the screen and on a desktop it stays a side panel. Change the cap with a max-w-* class on DrawerContent.

API Reference

Drawer

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

Button

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

All 22 drawer examples