Skip to content

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

Free

Dropdown with Shortcuts Dropdown Menu for React

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

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 React, Base UI only draws the shortcut.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button aria-label="Open menu" size="icon-md" variant="outline" />
    }
  >
    <MenuIcon aria-hidden="true" />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuItem>
      <FileTextIcon aria-hidden="true" />
      New File
      <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <CopyIcon aria-hidden="true" />
      Copy
      <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <ScissorsIcon aria-hidden="true" />
      Cut
      <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <ClipboardPasteIcon aria-hidden="true" />
      Paste
      <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
{/* The rest of the file is under Installation. */}

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. Set onClick on the Copy DropdownMenuItem.

API Reference

Dropdown Menu

Sets variant="destructive". 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