MenuBar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Installation

npx vayu-ui init #one time only

npx vayu-ui add menubar

npx vayu-ui add -t menubar #with test case needs

Usage

Menubar Example

Status Bar

Visible

Activity Bar

Hidden (Disabled)

Panel

Hidden

Zoom Level

100%

<Menubar>
  <Menubar.Menu trigger="File">
    <Menubar.Item shortcut="⌘N">New Tab</Menubar.Item>
    <Menubar.Item shortcut="⌘O">Open File...</Menubar.Item>
    <Menubar.Item shortcut="⌘S" disabled>Save</Menubar.Item>
    <Menubar.Separator />
    <Menubar.SubMenu trigger="Share">
      <Menubar.Item>Email Link</Menubar.Item>
      <Menubar.Item>Messages</Menubar.Item>
    </Menubar.SubMenu>
    <Menubar.Separator />
    <Menubar.Item shortcut="⌘P">Print...</Menubar.Item>
  </Menubar.Menu>

  <Menubar.Menu trigger="Edit">
    <Menubar.Item shortcut="⌘Z">Undo</Menubar.Item>
    <Menubar.Item shortcut="⇧⌘Z">Redo</Menubar.Item>
    <Menubar.Separator />
    <Menubar.Item shortcut="⌘X">Cut</Menubar.Item>
    <Menubar.Item shortcut="⌘C">Copy</Menubar.Item>
    <Menubar.Item shortcut="⌘V">Paste</Menubar.Item>
  </Menubar.Menu>

  <Menubar.Menu trigger="View">
    <Menubar.CheckboxItem checked={true} shortcut="⌘/">Show Status Bar</Menubar.CheckboxItem>
    <Menubar.CheckboxItem disabled>Show Activity Bar</Menubar.CheckboxItem>
    <Menubar.Separator />
    <Menubar.Label>Zoom</Menubar.Label>
    <Menubar.RadioGroup value="100%">
      <Menubar.RadioItem value="50%">50%</Menubar.RadioItem>
      <Menubar.RadioItem value="100%">100%</Menubar.RadioItem>
      <Menubar.RadioItem value="200%">200%</Menubar.RadioItem>
    </Menubar.RadioGroup>
  </Menubar.Menu>
</Menubar>

Anatomy

import { Menubar } from 'vayu-ui';

export default () => (
  <Menubar>
    <Menubar.Menu trigger="Menu Trigger">
      <Menubar.Label>Label</Menubar.Label>
      <Menubar.Item>Item 1</Menubar.Item>
      <Menubar.CheckboxItem checked>Checkbox Item</Menubar.CheckboxItem>
      <Menubar.Separator />
      <Menubar.SubMenu trigger="SubMenu Trigger">
        <Menubar.Item>Sub Item</Menubar.Item>
      </Menubar.SubMenu>
      <Menubar.RadioGroup value="val">
        <Menubar.RadioItem value="val">Radio Item</Menubar.RadioItem>
      </Menubar.RadioGroup>
    </Menubar.Menu>
  </Menubar>
);

Accessibility

Keyboard support: Arrow keys navigate between menu items and menus. Enter or Space selects an item. Esc closes the menu.
ARIA attributes: Uses role="menubar", role="menu", role="menuitem", role="menuitemcheckbox", and role="menuitemradio" for semantic meaning.
Focus behavior: Focus is trapped within the open menu. Returning focus to the trigger element when the menu closes.

Screen readers will announce the component as a "menubar" or "menu", reading each item with its state (such as checked/disabled) and available shortcuts. When opening a submenu, screen readers indicate the expanded hierarchy to help users comprehend the navigation context.

Component Folder Structure

MenuBar/
├── index.ts
├── types.ts
├── Menubar.tsx
├── Menu.tsx
├── MenubarItem.tsx
├── MenubarCheckBoxItem.tsx
├── MenubarRadioGroup.tsx
├── MenubarSubMenu.tsx
├── MenubarSeparator.tsx
├── MenubarLabel.tsx
├── MenubarPortal.tsx
├── hooks.ts
└── README.md

Props

Menubar

Prop	Type	Description
`orientation`	`"horizontal" \| "vertical"`	The orientation of the menubar. Defaults to `"horizontal"`.

Menubar.Menu

Prop	Type	Description
`trigger`	`React.ReactNode`	The element that opens the menu.
`disabled`	`boolean`	When true, prevents the user from interacting with the menu trigger.

Menubar.Item

Prop	Type	Description
`icon`	`React.ReactNode`	An optional icon to display before the item text.
`shortcut`	`string`	A string representation of a keyboard shortcut.
`disabled`	`boolean`	When true, prevents the user from interacting with the item.
`danger`	`boolean`	When true, styles the item with a danger appearance.
`onSelect`	`() => void`	Event handler called when the user selects an item.

Menubar.CheckboxItem

Prop	Type	Description
`checked`	`boolean`	The controlled checked state of the item.
`onCheckedChange`	`(checked: boolean) => void`	Event handler called when the checked state changes.
`icon`	`React.ReactNode`	An optional icon to display before the item text.
`shortcut`	`string`	A string representation of a keyboard shortcut.
`disabled`	`boolean`	When true, prevents the user from interacting with the item.
`danger`	`boolean`	When true, styles the item with a danger appearance.

Menubar.RadioGroup

Prop	Type	Description
`value`	`string`	The value of the currently selected radio item.
`onValueChange`	`(value: string) => void`	Event handler called when the value changes.

Menubar.RadioItem

Prop	Type	Description
`value`	`string`	The unique value of the item.
`icon`	`React.ReactNode`	An optional icon to display before the item text.
`shortcut`	`string`	A string representation of a keyboard shortcut.
`disabled`	`boolean`	When true, prevents the user from interacting with the item.
`danger`	`boolean`	When true, styles the item with a danger appearance.

Menubar.SubMenu

Prop	Type	Description
`trigger`	`React.ReactNode`	The element that opens the sub-menu.
`disabled`	`boolean`	When true, prevents the user from interacting with the sub-menu trigger.

Menubar.Separator

No meaningful props.

Menubar.Label

No meaningful props.

MenuBar

Menubar Example

On this page