shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI does not know which row you meant.
Installation
Anatomy
Usage
<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Row actions" })} size="icon-sm" variant="ghost"><MoreVerticalIcon aria-hidden="true" /></Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="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" />Delete</DropdownMenuItem></DropdownMenuContent></DropdownMenu>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.
API Reference
Dropdown Menu
Sets value="edit", value="duplicate", value="favorite", value="report", value="archive" and value="delete". The rest is on the Dropdown Menu page.
Button
Sets props, aria-label, Row, actions, size="icon-sm" and variant="ghost". The rest is on the Button page.
