Skip to content

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

Free

Dropdown with Shortcuts Dropdown Menu for Vue

A file and clipboard menu behind an icon button, with a printed keyboard shortcut on every row.

UI library: Ark UI

An icon button opens New File, Copy, Cut, Paste, Search, and a destructive Delete. Each row prints a shortcut, from ⌘N to ⌘⌫. The demo does not listen for those keys.

Use it so people can learn the keys from the menu. If there is nothing to click, a Kbd hint is enough on its own. In Vue, Ark UI only draws the shortcut.

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 aria-label="Open menu" size="icon-md" variant="outline">
      <MenuIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuItem value="new-file">
      <FileTextIcon aria-hidden="true" />New File<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem value="copy">
      <CopyIcon aria-hidden="true" />Copy<DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem value="cut">
      <ScissorsIcon aria-hidden="true" />Cut<DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem value="paste">
      <ClipboardPasteIcon aria-hidden="true" />Paste<DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem value="search">
      <SearchIcon aria-hidden="true" />Search<DropdownMenuShortcut>⌘F</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem value="delete" variant="destructive">
      <Trash2Icon aria-hidden="true" />Delete<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

FAQ

Which hints does this menu show?

New File ⌘N, Copy ⌘C, Cut ⌘X, Paste ⌘V, Search ⌘F and Delete ⌘⌫, each in a DropdownMenuShortcut at the end of the row. They only print the hint; bind the keys on the page so they work while the menu is closed.

How are the rows grouped?

Separators split them into New File; Copy, Cut and Paste; then Search and Delete. The menu is w-56.

What sits in front of each label?

A file, copy, scissors, clipboard, search or trash icon, aria-hidden, so the label carries the meaning.

What does the trigger look like?

An outline Button with size="icon-md", a menu icon and aria-label set to Open menu.

How is Delete different from Search?

Delete has variant="destructive", which colors it as a dangerous action. Otherwise both are plain items with an icon and a shortcut.

How do I make Copy actually copy?

Call navigator.clipboard.writeText with your text from the Copy row's handler. The menu closes on its own. Listen to @select on DropdownMenu and check for details.value copy.

API Reference

Dropdown Menu

Sets asChild, value="new-file", value="copy", value="cut", value="paste" and value="search". The rest is on the Dropdown Menu page.

Button

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

All 30 dropdown menu examples