Skip to content

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

Free

Table Row Actions Dropdown Menu for Ark UI

A narrow row actions menu for data tables, with edit, duplicate, favorite, report, archive and delete.

A small vertical-dots button opens Edit, Duplicate, Favorite, Report, Archive, and a destructive Delete. The button reads Row actions and does not name the row.

Use it when a row has several actions and no room for each button. The same list on a right-click is a Context Menu. In React, Ark UI does not know which row you meant.

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 aria-label="Row actions" size="icon-sm" variant="ghost">
      <MoreVerticalIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-40">
    <DropdownMenuItem value="edit">
      <PencilIcon aria-hidden="true" />
      Edit
    </DropdownMenuItem>
    <DropdownMenuItem value="duplicate">
      <CopyIcon aria-hidden="true" />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem value="favorite">
      <StarIcon aria-hidden="true" />
      Favorite
    </DropdownMenuItem>
    <DropdownMenuItem value="report">
      <FlagIcon aria-hidden="true" />
      Report
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem value="archive">
      <ArchiveIcon aria-hidden="true" />
      Archive
    </DropdownMenuItem>
    <DropdownMenuItem value="delete" variant="destructive">
      <Trash2Icon aria-hidden="true" />
{/* The rest of the file is under Installation. */}

FAQ

What actions are on the row?

Edit and Duplicate, a separator, Favorite and Report, a separator, then Archive and Delete. Each row starts with an icon that is aria-hidden.

How is Delete marked?

variant="destructive" on that DropdownMenuItem, after a trash icon. Archive, next to it, keeps the default variant. The variant colors the row and doesn't confirm the action.

What does the trigger look like?

A ghost Button with size="icon-sm", aria-label set to Row actions and a vertical dots icon. The menu lines up with the end of the button. End alignment is DropdownMenu's default bottom-end placement; pass positioning to change it.

Should the button say which row it acts on?

In a real table, yes. Every row's button reads Row actions here; include the row's name in its aria-label, such as Actions for invoice 1042, so screen reader users know which row they're on.

Should this open on right-click instead?

This demo opens from the row's button. Use a Context Menu when the same list should open from a right-click or a long press on the row; keep the button too, since a right-click is hard to discover.

How do I run Edit or Delete?

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 asChild, value="edit", value="duplicate", value="favorite", value="report" and value="archive". The rest is on the Dropdown Menu page.

Button

Sets aria-label="Row actions", size="icon-sm" and variant="ghost". The rest is on the Button page.

All 30 dropdown menu examples