Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Actions

Quick Actions Menu Dropdown Menu for React

A quick actions menu with labeled groups for create, search, filter, import and export, each with its keyboard shortcut.

Framework
UI library

Keyboard users want shortcuts; everyone else needs a menu that teaches them. This dropdown menu shows both: Create New, Search and Filter under a Quick Actions label, Import and Export under Import/Export, and Refresh at the end, each with its shortcut. It fits dashboards, data tools and editors.

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

How are the quick actions grouped?

The first DropdownMenuGroup holds the Quick Actions label, a separator, and Create New, Search and Filter. After a separator, a second group holds the Import/Export label with Import and Export. Refresh stands alone after a last separator.

Which shortcuts are shown?

Create New ⌘N, Search ⌘K, Filter ⌘F, Import ⌘I, Export ⌘E and Refresh ⌘R, each in a DropdownMenuShortcut at the end of the row. They're hints only: bind the keys on the page so they work while the menu is closed.

What leads each row?

A plus, search, filter, upload, download or refresh icon, aria-hidden, before the label. The menu is w-56.

What does the trigger look like?

A default Button with a lightning icon before the words Quick Actions.

Is Import/Export a command?

No. It's a DropdownMenuLabel, the heading of its group: the arrow keys skip it and nothing happens on click. Import and Export are the items under it.

How do I run Search or Export?

The menu closes after a choice. Handle it where your library reports the chosen item. Set onClick on each DropdownMenuItem.

All 30 dropdown menu examples