Skip to content

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

Free

Left Drawer Navigation Menu for Vue

A left Navigation drawer with Home, Team, Projects, Settings, and Help, each an icon and a label.

UI library: Ark UI

A menu button opens a left panel titled Navigation. Inside are Home, Team, Projects, Settings, and Help, each an icon with a label.

Use it for navigation on a phone. On a wide layout, keep the same links in a Sidebar. In Vue, Ark UI does not change the route.

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">
    <div class="flex flex-col gap-4 p-4">
      <DrawerTitle class="font-semibold text-lg">Navigation</DrawerTitle>
      <nav aria-label="Main" 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" />Projects
        </Button>
        <Button class="justify-start" variant="ghost">
          <SettingsIcon aria-hidden="true" data-icon="inline-start" />Settings
        </Button>
        <Button class="justify-start" variant="ghost">
          <CircleHelpIcon aria-hidden="true" data-icon="inline-start" />Help
        </Button>
      </nav>
    </div>
  </DrawerContent>
</Drawer>

FAQ

Which items does the menu have?

Home, Team, Projects, Settings and Help, each a ghost Button with justify-start, an icon marked data-icon="inline-start" and its label.

Where is the drawer's title?

Navigation, above the menu, is the DrawerTitle. DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading.

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.

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.

Does the drawer close when an item is picked?

Not in this demo: the items have no handler. Close it when people navigate: Pass open to Drawer and listen to @open-change, which receives details.open.

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.

All 22 drawer examples