{ "name": "Menu", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/Menu.tsx", "chapterTag": "06 Navigation", "chapter": "07-navigation.html", "sectionId": "menu", "elName": "Dropdown menu", "demoUrl": "https://brand.magicblocks.ai/components/07-navigation#menu", "hasLiveDemo": false, "description": "Dropdown menu with portal positioning, focus trap, arrow-key nav, and\ntypeahead. Wraps `.menu`. Supports two authoring styles:", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "Menu", "isPrincipal": true, "isType": false }, { "name": "MenuItem", "isPrincipal": false, "isType": true }, { "name": "MenuDivider", "isPrincipal": false, "isType": false }, { "name": "MenuGroup", "isPrincipal": false, "isType": true }, { "name": "MenuProps", "isPrincipal": false, "isType": true }, { "name": "MenuItemProps", "isPrincipal": false, "isType": true }, { "name": "MenuDividerProps", "isPrincipal": false, "isType": true }, { "name": "MenuGroupProps", "isPrincipal": false, "isType": true }, { "name": "MenuItemData", "isPrincipal": false, "isType": false }, { "name": "MenuGroupData", "isPrincipal": false, "isType": false } ], "importStatement": "import { Menu } from \"@magicblocksai/ui\";", "props": [ { "name": "label", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "children", "optional": true, "type": "ReactNode", "doc": "Inline children render alongside (or in place of) `label`." }, { "name": "icon", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "shortcut", "optional": true, "type": "string", "doc": "" }, { "name": "danger", "optional": true, "type": "boolean", "doc": "Render this item with the danger style." }, { "name": "disabled", "optional": true, "type": "boolean", "doc": "Disable the item — non-focusable, non-clickable." }, { "name": "href", "optional": true, "type": "string", "doc": "Optional href to render as ``." }, { "name": "onSelect", "optional": true, "type": "() => void", "doc": "Click / Enter handler." }, { "name": "keepOpen", "optional": true, "type": "boolean; // ── internal — wired by parent ── /** @internal */ _index?: number", "doc": "Keep the menu open after the item is selected. Default `false` (every selection closes — the historic kit behaviour). Set to `true` for multi-select rows where consumers want to flick several toggles without re-opening the menu between each — e.g. a workspace switcher with checkboxes, a column-visibility chooser, a tag picker. v1.39.0 — Spark Round X+1 (`DropdownMenuItem keepOpen`)." }, { "name": "_isActive", "optional": true, "type": "boolean", "doc": "@internal" }, { "name": "_onActivate", "optional": true, "type": "(index: number) => void", "doc": "@internal" }, { "name": "_close", "optional": true, "type": "() => void", "doc": "@internal" }, { "name": "_id", "optional": true, "type": "string", "doc": "@internal" } ], "classesUsed": [ "menu", "menu-divider", "menu-group", "menu-group-label", "menu-item", "menu-item-icon", "menu-item-label", "menu-trigger-wrap" ], "examples": { "react": null, "html": "
\n \n
\n
\n
A
\n
\n
Acme, Inc.
\n
Team · 4 seats
\n
\n
\n
\n \n \n \n
\n \n
\n
", "css": ".menu {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-2);\n display: flex; flex-direction: column; gap: 2px;\n box-shadow: var(--sh-3);\n min-width: 260px;\n}\n\n.menu-divider { height: 1px; background: var(--hair); margin: 4px 0; }\n\n.menu-group { display: flex; flex-direction: column; gap: 2px; }\n\n.menu-group-label { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); padding: var(--s-2) var(--s-3); }\n\n.menu-item {\n display: flex; align-items: center; gap: var(--s-3);\n padding: 8px var(--s-3);\n background: transparent; border: 0;\n border-radius: var(--r-xs);\n font: 500 13.5px/1 var(--f-body);\n color: var(--fg); cursor: pointer;\n text-align: left;\n transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.menu-item-icon { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--fg-dim); }\n\n.menu-item-label { flex: 1; min-width: 0; }\n\n.menu-trigger-wrap { display: inline-block; }" } }