Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Actions

Table Row Actions Dropdown Menu for React

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

Framework
UI library

Every data table needs row actions: edit this user, delete that order. This dropdown menu opens from a small vertical dots button that fits in a table cell and lists Edit, Duplicate, Favorite, Report, Archive and a destructive Delete in a narrow w-40 menu. It fits admin tables, user lists and dashboards where width is tight.

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

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. align="end" on DropdownMenuContent sets it; align defaults to start.

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 onClick on each DropdownMenuItem.

All 30 dropdown menu examples