Skip to content

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

Free

Mixed Features Dropdown Dropdown Menu for Vue

A File menu that mixes actions with shortcuts, an Export submenu, view toggles and an export quality choice.

UI library: Ark UI

File mixes Save and Print with shortcut hints, an Export submenu for PDF, PNG, and SVG, view checkboxes, an export quality choice, and a Recent Files row.

Use it when one menu has to hold commands, a submenu, toggles, and a single choice. Commands that stay on screen fit a Menubar. In Vue, Ark UI does not export the file or bind the keys.

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

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button variant="outline">
      <MenuIcon aria-hidden="true" data-icon="inline-start" />File
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>File Options</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="save">
        <SaveIcon aria-hidden="true" />Save<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <DownloadIcon aria-hidden="true" />Export
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem value="export-as-pdf">Export as PDF</DropdownMenuItem>
          <DropdownMenuItem value="export-as-png">Export as PNG</DropdownMenuItem>
          <DropdownMenuItem value="export-as-svg">Export as SVG</DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
      <DropdownMenuItem value="share">
        <Share2Icon aria-hidden="true" />Share
      </DropdownMenuItem>
      <DropdownMenuItem value="print">
        <PrinterIcon aria-hidden="true" />Print<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
<!-- The rest of the file is under Installation. -->

FAQ

What is in the File Options section?

Under its label and a separator: Save (⌘S), the Export submenu, Share and Print (⌘P), all in one DropdownMenuGroup. The menu is w-56.

How is the Export submenu built?

DropdownMenuSub wraps a DropdownMenuSubTrigger, a download icon and the word Export with its own chevron, and a DropdownMenuSubContent with Export as PDF, Export as PNG and Export as SVG. Hover or Arrow Right opens it.

How do Show Grid and Show Ruler work?

Two checkbox rows under a View Options label: Show Grid starts on, Show Ruler off, and each toggles on its own. Each DropdownMenuCheckboxItem takes :checked, a value, and @checked-change, which receives a boolean.

How does Export Quality work?

One value, high to start, out of low, medium and high, under an Export Quality label. Picking one unchecks the others. DropdownMenuRadioGroup takes :value, and @value-change receives details.value.

What does the trigger look like?

An outline Button with a menu icon before the word File.

When should this become a menubar?

When there's more than one menu like it, such as File, Edit and View side by side. A Menubar keeps them in one row and moves between them with the arrow keys.

API Reference

Dropdown Menu

Sets asChild, value="save", value="export-as-pdf", value="export-as-png", value="export-as-svg" and value="share". The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples