Context Menu
ProA context menu component with grouped actions and icons.
vu-context-menu · @velkin/react-pro/context-menu
A context menu component with grouped actions and icons.
vu-context-menu · @velkin/react-pro/context-menu
npm i @velkin/react-pro
import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");
// @velkin-pro
import { VuContextMenu } from "@velkin/react-pro/context-menu";| Prop | Type | Default | Description |
|---|---|---|---|
| items | VuContextMenuItem[] | [] | Menu entries with optional icons, grouping, and target filtering. |
| context | null
| {
target: VuContextMenuTarget;
clientX: number;
clientY: number;
graphX?: number;
graphY?: number;
node?: unknown;
edge?: unknown;
nodes?: unknown[];
edges?: unknown[];
value?: string;
data?: unknown;
} | null | Active pointer context from `openAt` or a host such as `<vu-flow>`. |
| overlay | boolean | false | When true, renders a viewport overlay positioned at `context.clientX/Y`. Default: `false` for `<vu-flow>` slot usage. |
| open | boolean | false | Reflected open state when visible rows or slotted content are shown. |
| variant | VuContextMenuVariant | "elevated" | Panel surface recipe (`elevated`/`outline`/`soft`). Default: `"elevated"`. |
| tone | VuContextMenuTone | "normal" | Neutral surface weight. Default: `"normal"`. |
| size | VuContextMenuSize | "md" | Row density (`sm`, `md`, `lg`). Default: `md`. |
| radius | VuContextMenuRadius | "md" | Panel corner preset (`sm`/`md`/`lg`). Default: `"md"`. |
| label | string | "" | Accessible name for the menu panel; localized default when empty. |
| Event | Detail | Description |
|---|---|---|
| vu-activate | VuContextMenuItemClickDetail | When a menu row is activated. |
| vu-open | CustomEvent<void> | When the menu becomes visible. |
| vu-close | CustomEvent<void> | When the menu hides. |
| Slot | Description |
|---|---|
| — | - Optional custom menu content when not using `items`. |
| Part | Description |
|---|---|
| backdrop | Full-screen dismiss layer in `overlay` mode. |
| panel | Menu surface (`role="menu"`). |
| submenu | Nested flyout panel for rows with `children`. |
| item | Action row button. |
| item-label | Visible label text inside a row. |
| divider | Horizontal separator between rows or groups. |
| group-label | Uppercase section label above a group. |
| Method | Description |
|---|---|
| hasVisibleItems | Returns true when at least one row is visible for the active `context`. |
| openAt | Opens the menu at viewport coordinates. |
| close | Clears `context` and hides the menu. |
| Name | Definition |
|---|---|
| VuContextMenuContext | null | |
| VuContextMenuItemClickDetail | |
| VuContextMenuRadius | |
| VuContextMenuSize | |
| VuContextMenuTone | |
| VuContextMenuVariant | |