Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Context Menu with Icons and Shortcuts
A React context menu with Lucide React icons, keyboard shortcuts, and destructive variant for common actions like view, copy, share, download, and delete
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Plain text menus work, but icons and shortcuts make power users fly. This React context menu combines Lucide React icons for visual recognition with keyboard shortcuts for rapid workflow. Built with shadcn/ui and Radix UI with destructive styling for delete—perfect for content platforms, media galleries, or any interface where users perform repetitive actions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Context Menu
Basic text-only menu without icons
Context Menu with Separators
Icon menu with visual grouping separators
File Operations Menu
File-specific actions with icons and shortcuts
Context Menu with Submenus
Icon menu with nested submenu structure
Dropdown Menu with Icons
Click-triggered alternative with icons
Layer Arrange Menu
Canvas operations with icons and shortcuts
Questions you might have
React Simple Context Menu
A minimal React context menu with basic text-only menu items for navigation actions like back, forward, reload, and more options
React Context Menu with Separators
A React context menu using separators to organize editing actions (edit), clipboard operations (cut, copy, paste), and destructive actions (delete)