ObjectUIObjectUI
ComponentsOverlay

Menubar

Horizontal menu bar with dropdown menus

The Menubar component provides a horizontal menu bar similar to desktop applications.

Basic Usage

Application Menubar

Dividers

An item is either a command or a divider between groups of commands — never both, and a divider never carries a label (objectui#6523). Author a divider as { "separator": true }; the retired { "type": "separator" } spelling is refused at parse time rather than silently ignored.

Schema

interface MenubarCommandItem {
  label: string;
  icon?: string;
  shortcut?: string;               // e.g. "Ctrl+T" — a single string, not an array
  disabled?: boolean;
  onClick?: () => void;            // Click handler
  children?: MenubarItem[];        // Submenu items — drawn as a nested submenu
}

interface MenubarDividerItem {
  separator: true;                 // renders as a divider — no label
}

type MenubarItem = MenubarCommandItem | MenubarDividerItem;

interface MenubarMenu {
  label: string;
  items: MenubarItem[];
}

interface MenubarSchema {
  type: 'menubar';
  menus?: MenubarMenu[];          // Menu definitions
  className?: string;
}

Handlers are declared on the item, not on the menu: the shipped MenuItem declares onClick?: () => void. The menu schema itself declares no event slot, so there is no menu-level onSelect.

On this page