BundyUI

Overlays

MenuItem

ContextMenu

A right-click-triggered menu of grouped, possibly nested actions.

html
<UiContextMenu />

Items

items is a flat array for one group, or nested arrays for several separated by dividers. Right-click the box below to open it.

Right click here

Opens on right-click (contextmenu event) at the cursor position, not anchored to the trigger element like DropdownMenu/Popover are.

`items` — grouped into arrays, separated by dividers

Right click here

Item `color`

Right click here

Checkbox items (`type: 'checkbox'`)

Right click here

Disabled

disabled stops the menu opening at all, so a right-click falls through to the browser's own menu.

Right click (disabled)

Nested submenu via `children`

Right click here

Items support the same shape as DropdownMenu — groups, colors, checkboxes, nested children submenus.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
items
ContextMenuItem[] | ContextMenuItem[][]
—
The menu items to display, either as a flat array or grouped into arrays separated by dividers.
disabled
boolean
false
Prevents the context menu from opening.

Slots

Slot
default

Emits

Event
Payload
Description
update:open
[value: boolean]
—

Types

ts
interface ContextMenuItem {
    label?: string;
    icon?: string;
    kbds?: string[];
    type?: "link" | "label" | "separator" | "checkbox";
    color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
    checked?: boolean;
    disabled?: boolean;
    onSelect?: (e: Event) => void;
    onUpdateChecked?: (checked: boolean) => void;
    children?: ContextMenuItem[] | ContextMenuItem[][];
    class?: any;
}