Shadcn.io is not affiliated with official shadcn/ui
Menubar with Shortcuts
Menubar component with MenubarShortcut displaying keyboard shortcuts next to menu items for Edit actions built with shadcn/ui
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.
Menubar with Shortcuts preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Compact Menubar
Compact Menubar component with single Options menu containing minimal Settings and Sign Out items for simple applications built with shadcn/ui
Menubar with Icons
Menubar component with Lucide React icons next to menu items for visual action identification in File menu built with shadcn/ui