Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Dropdown with Shortcuts
A React dropdown menu displaying keyboard shortcut badges alongside action items for Copy, Cut, Paste, Search, and Delete built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Power users love keyboard shortcuts, but memorizing dozens of key combos is brutal. This React dropdown menu shows shortcuts right next to actions—⌘C for Copy, ⌘X for Cut, ⌘V for Paste. Built with shadcn/ui and Radix UI with DropdownMenuShortcut badges, it's perfect for productivity apps, text editors, or any interface where discoverability helps users graduate from clicking to keyboard mastery.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Dropdown with Icons
Basic icon-labeled dropdown
Mixed Features Dropdown
Complex menu combining multiple features
Command Dialog
Keyboard-first command palette
Top Drawer Command Bar
Command interface with keyboard shortcuts
Simple Context Menu
Right-click menu alternative
Actions Popover
Compact action menu
Questions you might have
React Dropdown Menu - Dropdown with Groups and Labels
A React dropdown menu organized with section labels and visual separators grouping related account and team actions built with shadcn/ui
React Dropdown Menu - Dropdown with Checkboxes
A React dropdown menu with interactive checkboxes for toggling UI visibility options like Status Bar, Activity Bar, and Panel built with shadcn/ui