ObjectUIComponentsOverlay
Menubar
Horizontal menu bar with dropdown menus
The Menubar component provides a horizontal menu bar similar to desktop applications.
Basic Usage
Application Menubar
{
"type": "menubar",
"menus": [
{
"label": "File",
"items": [
{
"label": "New Tab",
"value": "new",
"shortcut": [
"Ctrl",
"T"
]
},
{
"label": "New Window",
"value": "window",
"shortcut": [
"Ctrl",
"N"
]
},
{
"type": "separator"
},
{
"label": "Exit",
"value": "exit"
}
]
},
{
"label": "Edit",
"items": [
{
"label": "Undo",
"value": "undo",
"shortcut": [
"Ctrl",
"Z"
]
},
{
"label": "Redo",
"value": "redo",
"shortcut": [
"Ctrl",
"Y"
]
},
{
"type": "separator"
},
{
"label": "Cut",
"value": "cut",
"shortcut": [
"Ctrl",
"X"
]
},
{
"label": "Copy",
"value": "copy",
"shortcut": [
"Ctrl",
"C"
]
},
{
"label": "Paste",
"value": "paste",
"shortcut": [
"Ctrl",
"V"
]
}
]
},
{
"label": "View",
"items": [
{
"label": "Zoom In",
"value": "zoom-in",
"shortcut": [
"Ctrl",
"+"
]
},
{
"label": "Zoom Out",
"value": "zoom-out",
"shortcut": [
"Ctrl",
"-"
]
},
{
"label": "Reset Zoom",
"value": "reset",
"shortcut": [
"Ctrl",
"0"
]
}
]
}
]
}Schema
interface MenubarItem {
label?: string;
value?: string;
icon?: string;
shortcut?: string[];
type?: 'separator';
disabled?: boolean;
}
interface MenubarMenu {
label: string;
items: MenubarItem[];
}
interface MenubarSchema {
type: 'menubar';
menus: MenubarMenu[]; // Menu definitions
// Events
onSelect?: string | ActionConfig;
// Styling
className?: string;
}