Preview Updated 2026-05-10

MenuBar

Top app menu bar (File / Edit / View style); supports shortcuts, separators, and danger items.

Basic usage

Click a menu to open / toggle; hover lets you switch quickly between top-level menus; clicking outside or selecting an item closes the menu.

src/App.vue vue

<CfMenuBar :menus="menus" @select="(menuId, itemId) => onPick(menuId, itemId)" />

src/App.tsx tsx

<CfMenuBar menus={menus} onSelect={(menuId, itemId) => onPick(menuId, itemId)} />

menus: MenuBarMenu[] — { id, label, items: MenuBarItem[] }

MenuBarItem: { id, label, shortcut?, disabled?, danger?, separator? }

Events: select(menuId, itemId, item).