Skip to content

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

Free

Batch Actions Dropdown Dropdown Menu for Ark UI

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

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 React, Ark UI does not count the rows or bind the hints.

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 asChild>
    <Button variant="outline">
      Batch Actions
      <ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="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">
{/* The rest of the file is under Installation. */}

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. DropdownMenuTrigger takes asChild, with the button as its only child.

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 asChild, value="mark-as-complete", value="mark-as-incomplete", value="add-tags", value="export-selected" and value="archive-selected". The rest is on the Dropdown Menu page.

Button

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

All 30 dropdown menu examples