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 github:itsvigneshv/default-file-ui#main df-ui add context-menu
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.