Menubar

An application-level menu bar for top-level navigation commands. Keyboard navigable with full support for sub-menus, checkboxes, radio groups, and keyboard shortcuts display.

Built on Radix UI.

✓Keyboard navigable with arrow keys
✓Supports sub-menus, checkboxes, and radio groups
✓Built on Radix UI Menubar primitive
✓Includes shortcuts display via MenubarShortcut

import { Menubar }from "@aetherstack/ui"

menubar.tsx

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from "@/components/ui/menubar"

export function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Save <MenubarShortcut>⌘S</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
          <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Usage

With sub-menu

Nest MenubarSub inside any MenubarContent for fly-out sub-menus.

With checkbox items

Use MenubarCheckboxItem for toggleable settings.

Props

Prop	Type	Default	Description

Menubar

Prop	Type	Default	Description
className	string	—	Additional Tailwind classes on the root menubar element.

MenubarItem

Prop	Type	Default	Description
inset	boolean	—	Adds left padding to align text with items that have icons.
disabled	boolean	—	Prevents the item from being selected.

MenubarShortcut

Prop	Type	Default	Description
children	ReactNode	—	The keyboard shortcut text to display right-aligned (e.g. ⌘S).

MenubarCheckboxItem

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state.
onCheckedChange	(checked: boolean) => void	—	Callback fired when the checked state changes.

* Required props

Accessibility

→Menubar follows the ARIA menubar pattern — arrow keys navigate between menus and items.
→Escape closes the open menu and returns focus to the trigger.
→Each MenubarMenu is a menu landmark; MenubarContent uses role='menu'.
→MenubarCheckboxItem has role='menuitemcheckbox' with aria-checked managed by Radix UI.