Skip to content

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

Free

Quick Actions Menu Dropdown Menu for Svelte

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

UI library: Ark UI

Quick Actions groups Create New, Search, and Filter, then Import and Export, then Refresh. Every row prints a shortcut. The keys are not bound.

Use it on a dashboard when commands and their keys should be taught from one button. If people should type to filter the list, use Command. In Svelte, Ark UI only prints the shortcuts.

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>{#snippet asChild(props)}<Button {...props()}><ZapIcon aria-hidden="true" data-icon="inline-start" />Quick Actions</Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-56"><DropdownMenuGroup><DropdownMenuLabel>Quick Actions</DropdownMenuLabel><DropdownMenuSeparator /><DropdownMenuItem value="create-new"><PlusIcon aria-hidden="true" />Create New<DropdownMenuShortcut>⌘N</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="search"><SearchIcon aria-hidden="true" />Search<DropdownMenuShortcut>⌘K</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="filter"><FilterIcon aria-hidden="true" />Filter<DropdownMenuShortcut>⌘F</DropdownMenuShortcut></DropdownMenuItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuGroup><DropdownMenuLabel>Import/Export</DropdownMenuLabel><DropdownMenuItem value="import"><UploadIcon aria-hidden="true" />Import<DropdownMenuShortcut>⌘I</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="export"><DownloadIcon aria-hidden="true" />Export<DropdownMenuShortcut>⌘E</DropdownMenuShortcut></DropdownMenuItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuItem value="refresh"><RefreshCwIcon aria-hidden="true" />Refresh<DropdownMenuShortcut>⌘R</DropdownMenuShortcut></DropdownMenuItem></DropdownMenuContent></DropdownMenu>

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 onSelect on DropdownMenu. It receives details.value, the chosen item's value.

API Reference

Dropdown Menu

Sets value="create-new", value="search", value="filter", value="import", value="export" and value="refresh". The rest is on the Dropdown Menu page.

Button

Sets props. The rest is on the Button page.

All 30 dropdown menu examples