Menubar

Compact application commands with scoped menu keyboard navigation.

Interactive preview

Live specimenTry the component

1 local project · Layout guides hidden. Synthetic workspace.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add menubar

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Menubar aria-label="Workspace commands">
  <MenubarMenu value="file">
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem onSelect={createLocalProject}>New local project</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`value / defaultValue / onValueChange`	`open menu key / (string) => void`	`''`
`MenubarMenu: value`	`unique non-empty string`	`required`
`MenubarTrigger / Content`	`native button / menu div attributes and refs`	`same menu sizing as Dropdown Menu`
`Item / CheckboxItem / RadioItem / Sub`	`original menu parts`	`same selection contracts as Dropdown Menu`

Accessibility

One roving Tab stop among enabled top-level triggers. Left/Right follow text direction; Home/End and buffered typeahead move among headings. Enter/Space or Down opens the first item; Up opens the last. While a menu is open, Left/Right changes root menus; nested submenu keys retain their own scope. Escape restores the trigger, Tab leaves the whole menubar, and checked/radio item behavior is shared with Dropdown Menu. Pointer hover switches headings only while a menu is already open. Disabled top-level triggers are skipped; disabled popup actions remain discoverable. Name the menubar. Controlled value is the open menu key; empty string closes it. Root forwards a div ref, trigger a button ref, content a div ref; Menu/Sub roots have no DOM element/ref. No global shortcut or hover-open submenu service is installed.