Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Menubar with Shortcuts
Menubar component with MenubarShortcut displaying keyboard shortcuts next to menu items for Edit actions 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 only if they can discover them. This React Menubar displays shortcuts like Command+Z, Command+X right next to menu items in an Edit menu. Built with shadcn/ui MenubarShortcut component and Radix UI primitives, it shows Mac keyboard symbols (⌘, ⇧) or platform-specific equivalents helping users learn shortcuts through visual reinforcement. Perfect for code editors, document processors, design tools, or any application where keyboard efficiency matters—users see the shortcut every time they browse menus.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Text Menubar
Basic menubar without keyboard shortcuts
Application Menubar
Full menubar with File, Edit, View and shortcuts
Menubar with Icons
Menu items with Lucide React icons
Mac Command Symbol
Platform-specific keyboard symbols in Kbd
Keyboard Shortcuts
Multi-key shortcut combinations
Command Menu
Search-based command palette for shortcuts
Questions you might have
React Compact Menubar
Compact Menubar component with single Options menu containing minimal Settings and Sign Out items for simple applications built with shadcn/ui
React Menubar with Icons
Menubar component with Lucide React icons next to menu items for visual action identification in File menu built with shadcn/ui