Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

Dropdown with Shortcuts Dropdown Menu for React

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

Framework
UI library

Nobody memorizes dozens of key combos up front; they learn them from menus. This dropdown menu shows the shortcut next to each action: ⌘N for New File, ⌘C, ⌘X and ⌘V for the clipboard, ⌘F for Search and ⌘⌫ for a destructive Delete. It fits editors, file managers and productivity apps.

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

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.

All 30 dropdown menu examples