Pointer and keyboard menu with nested submenus and an imperative open helper.
Also known as: right click menu, contextual menu
Install with the CLI, or copy the component source into your project.
Add context-menu (npm)
1npx --yes -p @default-file/ui df-ui add context-menu
Pointer menu with glyphs, shortcut hints, a nested export list, disabled rows, and a destructive action. Opens on load next to the board.
Submenu trees on Export and Share. Hover the row or press Arrow Right to open the nested surface.
Hover Export or Share, or press Arrow Right, to open the nested menu.
shortcut renders a Kbd chip on the row. Right click the board to open.
Mount ContextMenuHost, then call openContextMenu from a pointer handler. The helper positions at the event.
Parent state owns open. onSelect reports the chosen action in addition to any item handler.
Menu is closed.
Pointer and keyboard context menu with nested submenus, typeahead, and an imperative open helper. Mount ContextMenuHost once for openContextMenu.
| Prop | Type | Default | Notes |
|---|---|---|---|
| items | ContextMenuEntry[] | - | Menu tree of actions and separators (required). |
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | false | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Called when open should change. |
| onSelect | (item: ContextMenuActionEntry) => void | - | Called when an action is chosen, in addition to item.onSelect. |
| children | ReactElement | - | Single trigger element. Receives contextmenu and Shift+F10 / ContextMenu key handlers. |
| className | string | - | Additional classes merged onto the trigger. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| id | string | - | Stable action id (required). |
| label | string | - | Visible label (required). |
| glyph | ReactNode | - | Leading mark. |
| shortcut | string | - | Optional shortcut shown with Kbd. |
| disabled | boolean | - | Non-selectable item. |
| destructive | boolean | - | Destructive visual tone. |
| onSelect | () => void | - | Per-item select handler. |
| submenu | ContextMenuEntry[] | - | Nested menu opened from this item. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "separator" | - | Marks a separator row. |
| id | string | - | Optional stable id for the separator. |
Renders the imperative menu session. Mount once near the app root before calling openContextMenu.
Opens a menu at the pointer or trigger box. Requires ContextMenuHost mounted in the tree. Signature: (event, items) => void.
Role (menu): Root and submenu surfaces are menus with menuitem rows. Arrow keys, Home, End, typeahead, Enter, and Escape navigate and dismiss. Placement (anchored): Uses the shared anchored-position hook. After a position attempt the menu stays interactive even when the first measure has no box.