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.