Menubar
menubarOrganizes persistent application menus into a keyboard-accessible horizontal bar.
Usage
Basic usage
Multiple MenubarMenu form a horizontal menu bar. Open one and hover to switch to the adjacent menu.
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New window</MenubarItem>
<MenubarItem>Open...</MenubarItem>
<MenubarSeparator />
<MenubarItem variant="danger">Exit</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Cancel</MenubarItem>
<MenubarItem>Rework</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>Group title
Use MenubarGroupLabel to add a subtitle to a group of items in the drop-down content.
<Menubar>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Cancel</MenubarItem>
<MenubarSeparator />
<MenubarGroupLabel>Clipboard</MenubarGroupLabel>
<MenubarItem>Copy</MenubarItem>
<MenubarItem>Paste</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>Vertical menu bar
orientation="vertical" Arrange the menu bar vertically, suitable for side scenes.
<Menubar orientation="vertical">
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New window</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarItem>Zoom in</MenubarItem>
<MenubarItem>Zoom out</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>When to use
Use Menubar for a desktop-style horizontal menu bar where each top-level entry, such as File, Edit, or View, opens a dropdown. Arrow keys move among the top-level entries and an adjacent menu can take over while the bar is open. Use Menu for one trigger and one set of actions, or NavigationMenu for rich site-navigation panels.
Import
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarGroup, MenubarGroupLabel } from "@hulianui/ui"Props
The root Menubar forwards Base UI Menubar props and adds className. MenubarMenu and MenubarTrigger forward their corresponding Base UI Menu props. Dropdown parts—Item, Separator, Group, and GroupLabel—reuse Menu styling and behavior; for example, MenubarItem supports variant="danger".
| Name | Type | Default | Description |
|---|---|---|---|
| modal | boolean | true | Whether background content becomes non-interactive while a menu is open. |
| orientation | "horizontal" | "vertical" | "horizontal" | Menu-bar orientation. |
| loopFocus | boolean | true | Whether arrow-key focus wraps after the last item. |
| disabled | boolean | false | Whether the entire bar is disabled. |
| className | string | — | Additional class name. |
MenubarMenu forwards Base UI Menu.Root props such as open, defaultOpen, and onOpenChange; MenubarTrigger forwards Menu.Trigger props.
Events
MenubarMenu
| Event | Type | Description |
|---|---|---|
| onOpenChange | (open: boolean) => void | Called when a top-level menu opens or closes; forwarded to Base UI Menu.Root. |
Example
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New window</MenubarItem>
<MenubarSeparator />
<MenubarItem variant="danger">Quit</MenubarItem>
</MenubarContent>
</MenubarMenu>
{/* More top-level menus */}
</Menubar>Usage guidelines
- As with Menu,
MenubarGroupLabelmust be nested inMenubarGroup; otherwise opening the menu throws a missingGroupRootContexterror. - Put only
MenubarTriggerandMenubarContentinside each top-levelMenubarMenu. Menu entries belong inside Content, not directly underMenubar.
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Dock
Playground
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New window</MenubarItem>
<MenubarSeparator />
<MenubarItem variant="danger">Exit</MenubarItem>
</MenubarContent>
</MenubarMenu>
{/* More top-level menus... */}
</Menubar>