Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Simple Text Menubar
Simple text-only Menubar component with single File menu and basic actions for desktop-style navigation built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Desktop apps have menubars—File, Edit, View across the top—but web apps rarely do. This React Menubar brings that familiar pattern to web interfaces with a simple File menu containing New, Open, Save actions. Built with shadcn/ui and Radix UI primitives, it provides keyboard navigation (Tab to menu, Arrow keys to items, Enter to select) perfect for web-based editors, design tools, admin panels, or any rich application needing desktop-like navigation conventions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Menubar with Shortcuts
Menubar items with keyboard shortcut indicators
Menubar with Icons
Menu items with Lucide React icon indicators
Application Menubar
Complete menubar with File, Edit, and View menus
Compact Menubar
Single Options menu with minimal items
Dropdown Menu
Context menu for actions and options
Navigation Menu
Site navigation with dropdown submenus