Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Actions

Card Actions with Nested Share Dropdown Menu for React

A card's actions menu with Edit, Duplicate, Archive and Delete, and a Share submenu for email and social networks.

Framework
UI library

Four share targets as top-level rows would push a card's own actions out of sight. This dropdown menu opens from a dots button and keeps Edit, Duplicate, Archive and a destructive Delete in the first list, with Email, Twitter, Facebook and LinkedIn in a Share submenu built from DropdownMenuSub, DropdownMenuSubTrigger and DropdownMenuSubContent. It fits blog cards, product listings and galleries.

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 opens the card actions?

A ghost Button with size="icon-sm" and aria-label set to Card actions, holding a dots icon that is aria-hidden. DropdownMenuTrigger renders the button through render, and the icon goes inside the trigger.

Where does the menu open?

Below the button, lined up with its end edge, and it flips to stay on screen. The menu is w-48. align="end" on DropdownMenuContent does it; align defaults to start.

What is the order of the rows?

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

How is Share nested?

DropdownMenuSub wraps a DropdownMenuSubTrigger, which draws its own chevron, and a DropdownMenuSubContent with Email, Twitter, Facebook and LinkedIn. It opens on hover, or with Arrow Right from the keyboard, and Arrow Left closes it. Lucide has no brand logos, so the social rows use generic icons: swap in your own logo icons.

How is Delete marked?

variant="destructive" on that DropdownMenuItem, after a trash icon. Archive, above it, keeps the default variant. The variant only colors the row; confirm the delete yourself.

How do I run Edit, Share, 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