Workspace
Application menu
The in-window menu bar, with keyboard traversal
no menu is open
Usage
import { AppMenu, type AppMenuEntry } from "@gpuixui/shell";
const menus: ReadonlyArray<AppMenuEntry> = [
{
id: "file",
label: "File",
items: [
{ id: "new", label: "New file", accelerator: "mod+n" },
{ id: "save", label: "Save", accelerator: "mod+s" },
],
},
{ id: "edit", label: "Edit", items: [{ id: "undo", label: "Undo", accelerator: "mod+z" }] },
];
<AppMenu label="Editor" menus={menus} onSelect={(menuId, itemId) => run(menuId, itemId)} />;Pointer
A closed bar opens nothing on hover: a menu opens on press. Once one menu is open, moving the pointer onto a sibling title switches to that menu at once and closes the previous one, the macOS menu-bar rule; pressing the open title again closes it. Moving off a title into its dropdown keeps the dropdown open.
API
| Part | Renders | Props |
|---|---|---|
AppMenu | div with role="menubar" | label?, menus (required), platform?, onSelect?, className? |
AppMenuItem | a dropdown row | id, label, accelerator?, disabled? |
AppMenuEntry | a top-level menu | id, label, disabled?, items |
Keyboard
- Arrow LeftArrow Right
- moves between the bar's menus
- Arrow Down
- opens the highlighted menu, and moves down a row once open
- Arrow Up
- moves up a row once a menu is open
- EnterSpace
- opens the highlighted menu, and runs the open menu's highlighted action
- Escape
- closes the open menu and returns focus to its trigger
- Tab
- closes the menu bar state
read from app-menu.tsx
Edit this page on GitHubpackages/shell/docs/app-menu.mdx