Menubar
Horizontal menu bar for application-level navigation and commands, with support for submenus, checkboxes, and radio groups.
When To Use
- Use Menubar when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Key exports
MenubarRoot, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem
Example Code
import {
Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
MenubarItem, MenubarSeparator, MenubarShortcut,
MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel,
} from "@hilum/ui"
function AppMenubar() {
const [showToolbar, setShowToolbar] = React.useState(true)
const [showSidebar, setShowSidebar] = React.useState(false)
const [zoom, setZoom] = React.useState("100")
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
<MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
// ...trimmed for docs