Menubar
A desktop-style horizontal menu bar with File, Edit, and View style menus. Built on the Radix UI Menubar primitive with premium visual variants, semantic item styles, nested submenus, and checkbox/radio selection — full visual parity with Dropdown Menu and Context Menu Pro.
Pro features
What the Pro version adds to this component.
Premium Visual Variants
Glass, gradient, neon, and premium surfaces for the menu panel plus six width presets from sm to full
Semantic Item Styles
Destructive, success, warning, and premium item variants communicate action intent at a glance
Nested Submenus
Multi-level Sub, SubTrigger, and SubContent composition with optional badges and chevron control
Checkbox and Radio Items
Built-in checked and radio selection with indicators for view and preference menus
Accessible by Default
Built on Radix UI: full keyboard navigation, typeahead, ARIA menubar semantics, and focus management
Menu Family Parity
Shares its visual system with Dropdown Menu and Context Menu Pro so every menu surface looks identical
Installation
Install via CLI
npx @moontra/moonui-cli add menubarUsage
Examples
Basic Menubar
A persistent desktop-style menu bar with File, Edit, and View menus, keyboard shortcut hints, disabled items, and separators. Switch between menus with arrow keys once one is open.
Nested Submenu
Compose multi-level menus with MenubarSub, MenubarSubTrigger, and MenubarSubContent. The Share entry opens a nested submenu on hover or with the right arrow key.
Checkbox and Radio Items
Build view menus with MenubarCheckboxItem for toggles and MenubarRadioGroup for exclusive selection. MenubarLabel titles each section.
Panel Variants and Sizes
MenubarContent ships five visual variants (default, glass, gradient, neon, premium) and six width presets (sm through 2xl plus full). MenubarItem carries its own variant scale for semantic rows — destructive, success, warning and premium — and three sizes. Open each menu below to compare them side by side.