Skip to content

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

Free

Batch Actions Dropdown Dropdown Menu for Svelte

A batch actions menu for several selected items, with a count label and actions to complete, tag, export, archive or delete them.

UI library: Ark UI

Batch Actions opens a menu whose label reads 3 items selected. The rows mark complete or incomplete, add tags, export, archive, or delete. The 3 and the shortcut hints are fixed text.

Use it when one set of commands applies to a selection, and disable it when nothing is selected. Confirm a delete in an Alert Dialog. In Svelte, Ark UI does not count the rows or bind the hints.

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()} variant="outline">Batch Actions<ChevronDownIcon aria-hidden="true" data-icon="inline-end" /></Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-56"><DropdownMenuGroup><DropdownMenuLabel>3 items selected</DropdownMenuLabel><DropdownMenuSeparator /><DropdownMenuItem value="mark-as-complete"><CircleCheckIcon aria-hidden="true" />Mark as Complete</DropdownMenuItem><DropdownMenuItem value="mark-as-incomplete"><CircleXIcon aria-hidden="true" />Mark as Incomplete</DropdownMenuItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuItem value="add-tags"><TagIcon aria-hidden="true" />Add Tags</DropdownMenuItem><DropdownMenuItem value="export-selected"><DownloadIcon aria-hidden="true" />Export Selected<DropdownMenuShortcut>⌘E</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="archive-selected"><ArchiveIcon aria-hidden="true" />Archive Selected</DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem value="delete-selected" variant="destructive"><Trash2Icon aria-hidden="true" />Delete Selected<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut></DropdownMenuItem></DropdownMenuContent></DropdownMenu>

FAQ

Where does 3 items selected come from?

It's the text of the DropdownMenuLabel at the top, and the demo hardcodes it. Put your selection count there, and disable the trigger when nothing is selected so the menu can't run on an empty selection.

What actions are in the menu?

Mark as Complete and Mark as Incomplete, then a separator, then Add Tags, Export Selected and Archive Selected, then a separator and Delete Selected. The label and the first two rows share a DropdownMenuGroup, and the menu is w-56.

Which rows show a shortcut?

Export Selected shows ⌘E and Delete Selected shows ⌘⌫, each in a DropdownMenuShortcut at the end of the row. The shortcut only prints the hint: register the keys on the page yourself, since the menu is closed when people press them.

How is Delete Selected marked?

variant="destructive" on that DropdownMenuItem colors the row, after a trash icon. It doesn't ask for confirmation: open an Alert Dialog that says how many items will go before you delete them.

What does the trigger look like?

An outline Button that reads Batch Actions, with a chevron after the words.

How do I run a batch action?

The menu closes after a choice. Run the action on your selection 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="mark-as-complete", value="mark-as-incomplete", value="add-tags", value="export-selected", value="archive-selected" and value="delete-selected". The rest is on the Dropdown Menu page.

Button

Sets props and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples