Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Card Actions with Nested Share
A React dropdown menu with nested submenu for social sharing options including Email, Twitter, Facebook, and LinkedIn alongside edit and delete actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ever tried cramming Email, Twitter, Facebook, and LinkedIn share buttons into a dropdown? It gets messy fast. This React dropdown menu uses shadcn/ui's nested DropdownMenuSub to hide share options in a flyout submenu. Built with Radix UI and Lucide React icons, users hover over Share to reveal social platforms—perfect for blog post cards, product listings, content galleries, and any interface where sharing to multiple platforms needs clean organization.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
File Actions Dropdown
Menu for file operations with keyboard shortcuts
Table Row Actions
Compact dropdown for table row operations
Nested Dropdown Menu
Standard menu with multiple submenus
Batch Actions Dropdown
Bulk operations for multiple items
Quick Actions Menu
Grouped actions with keyboard shortcuts
Card with Actions
Card component with action menu
Questions you might have
React Dropdown Menu - Table Row Actions
A React dropdown menu for data table row actions with edit, duplicate, favorite, report, archive, and delete operations in a compact vertical layout
React Dropdown Menu - Batch Actions Dropdown
A React dropdown menu for bulk operations on multiple selected items showing selection count with actions like mark complete, tag, export, archive, and delete