https://framer.com/m/MenuX-7Xtn.js
DropdownMenuX
DropdownMenuX is a popover menu of actions: clickable items with icons and shortcut hints, nested submenus, checkbox toggles and radio groups. The whole structure comes from one JSON schema, and every callback is a function name looked up on window.
Examples
The trigger is a layer slot: whatever layer sits in it becomes the button that opens the menu, and the menu anchors to it. Each specimen below carries a Button in that slot and the exact schema quoted under it — swap the Button for an icon or a whole card and nothing else changes.
Actions
The common shape: clickable items with an icon and an optional shortcut hint, a separator, and the destructive action last in red. Every onClick is a function name the component looks up on window — bind them in a Code Override on the trigger.
Actions · 5 items, icons, shortcut hints, destructive last
{ “version”: “1.0”, “items”: [ { “type”: “item”, “label”: “Edit”, “icon”: “Pencil”, “shortcut”: “⌘E”, “onClick”: “handleEdit” }, { “type”: “item”, “label”: “Duplicate”, “icon”: “Copy”, “shortcut”: “⌘D”, “onClick”: “handleDuplicate” }, { “type”: “item”, “label”: “Download”, “icon”: “Download”, “onClick”: “handleDownload” }, { “type”: “separator” }, { “type”: “item”, “label”: “Delete”, “icon”: “Trash”, “color”: “red”, “onClick”: “handleDelete” } ] }
Submenus
A sub item opens sideways and can nest one level deeper — three levels total is the documented ceiling. A label groups the items under it.
Submenus · label, sub, and a second level under Share
{ “version”: “1.0”, “items”: [ { “type”: “label”, “label”: “Document” }, { “type”: “item”, “label”: “Open”, “icon”: “Folder”, “onClick”: “handleOpen” }, { “type”: “item”, “label”: “Rename”, “icon”: “Pencil”, “onClick”: “handleRename” }, { “type”: “separator” }, { “type”: “sub”, “label”: “Share”, “icon”: “Share”, “items”: [ { “type”: “item”, “label”: “Copy link”, “onClick”: “handleCopyLink” }, { “type”: “item”, “label”: “Email”, “onClick”: “handleEmail” }, { “type”: “sub”, “label”: “Export as”, “items”: [ { “type”: “item”, “label”: “PDF”, “onClick”: “handleExportPdf” }, { “type”: “item”, “label”: “PNG”, “onClick”: “handleExportPng” } ] } ] }, { “type”: “separator” }, { “type”: “item”, “label”: “Delete”, “icon”: “Trash”, “color”: “red”, “onClick”: “handleDelete” } ] }
Checkbox and radio
Checkbox items keep their own state after the first click; a radiogroup is mutually exclusive and reports through onValueChange. Neither takes an icon — the indicator owns that slot.
Checkbox and radio · two toggles and a three-way group
{ “version”: “1.0”, “items”: [ { “type”: “label”, “label”: “View” }, { “type”: “checkbox”, “label”: “Show ruler”, “checked”: true, “shortcut”: “⌘R”, “onCheckedChange”: “handleRulerToggle” }, { “type”: “checkbox”, “label”: “Show grid”, “checked”: false, “onCheckedChange”: “handleGridToggle” }, { “type”: “separator” }, { “type”: “radiogroup”, “label”: “Theme”, “defaultValue”: “auto”, “onValueChange”: “handleThemeChange”, “items”: [ { “value”: “light”, “label”: “Light” }, { “value”: “dark”, “label”: “Dark” }, { “value”: “auto”, “label”: “System” } ] } ] }
Props
Four controls on the instance panel; the rows below them are the schema’s item types.
Usage
Guidance carried over from the component definition.
Reach for DropdownMenuX
A kebab or context menu hanging off a row, a card or a toolbar button.
Menus whose shape is data: the whole structure is one JSON schema, so it can be generated or swapped at runtime.
Mixed menus — actions, a nested submenu, toggles and a radio group in the same popover.
Destructive actions that need to look destructive: color red plus a separator is the house pattern.
Reach for something else
Choosing one value from a list. That is SelectX — a menu is for acting, not for picking.
Choosing several. TagPicker holds multi-select state; a menu of checkboxes does not report a set.
Site navigation. This site’s own nav is built from native frames and overlays, not from this component.
Io — UI Basics
The three instances above are live DropdownMenuX instances carrying these exact schemas. Each trigger is a Button placed in the Trigger Button slot.