Shadcn Menubar: Desktop-Style Application Menus in React
The shadcn menubar recreates the classic File, Edit, View menu strip from desktop software inside the browser. Built on the Radix UI menubar primitive and styled with Tailwind CSS, it gives web apps a persistent command surface where related actions live under labeled menus, complete with submenus, shortcuts, and checkable items.
The example on this page is a full copy-paste react menubar with nested submenus, keyboard shortcut hints, separators, and checkbox and radio items. It is written in TypeScript and serves as a solid base for editors, dashboards, and any productivity tool built with Next.js.
Where a menubar belongs
Menubars suit applications, not marketing sites. Document editors, design tools, spreadsheet views, IDE-like interfaces, and dense admin consoles benefit from a stable strip where dozens of commands stay organized under a handful of top-level labels. Users familiar with desktop software already know how to explore it.
For a content site or a typical SaaS dashboard with a dozen actions, a navigation menu or a toolbar of buttons is lighter. The menubar earns its space once the command count outgrows what buttons and dropdowns can hold cleanly.
Design guidelines
- Follow familiar groupings: Users expect New and Open under File and preferences under Edit or View, so lean on desktop conventions instead of inventing categories.
- Keep top-level labels short: Single words like File, Edit, and View scan instantly and keep the strip compact.
- Show shortcuts inline: Displaying Ctrl or Cmd hints beside items turns the menubar into documentation for your keyboard layer.
- Separate destructive commands: Place actions like Delete or Reset behind a separator at the bottom of their menu.
- Prefer disabling to hiding: A stable menu structure with disabled items is easier to learn than menus whose contents shift between states.
What the component takes care of
- Hover-through navigation: Once one menu is open, sliding the pointer across the strip opens neighboring menus without extra clicks, matching desktop behavior.
- Complete keyboard model: Arrow keys move across menus and items, typeahead jumps to commands, and Escape backs out, per the WAI-ARIA menubar pattern.
- Checkable state built in: Checkbox items and radio groups handle view toggles like Show grid or exclusive choices like zoom level.
- Portal rendering: Menu panels render above the page with collision-aware positioning, so layout containers never clip them.
Pairing with other components
A menubar usually anchors the top of an app shell, with a command palette covering the same actions for keyboard-first users. Right-click access to contextual subsets of those commands is the job of the context menu, and one-off action clusters elsewhere in the UI fit a dropdown menu.
Commands that need confirmation should route through an alert dialog. The editor-style screens in our react dashboards show a menubar working alongside these pieces in a real layout.
Primitive support
Underneath sits the Radix UI Menubar primitive, which implements the roving focus, hover-through behavior, submenu timing, and ARIA menubar semantics that are genuinely hard to get right by hand. The shadcn menubar docs list every styled part.
Base UI ships its own Menubar component with the same conceptual anatomy, so teams standardized on Base UI can apply the Tailwind CSS treatment from this page to that primitive instead.