BundyUI

Overlays

MenuItem

ContextMenu

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

vue
<UiContextMenu />

Options

One block per prop — what it does, and what it looks like set.

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.

Disabled

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

Right click (disabled)

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

`items` — grouped into arrays, separated by dividers

Right click here

Item `color`

Right click here

Checkbox items (`type: 'checkbox'`)

Right click here

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;

    /**
     * The row's icon: an icon name, or `{ name, color, fill }` to also tint just the icon
     * (independent of `color`, which tints the whole row) or render its filled variant.
     */
    icon?: string | MenuItemIcon;
    kbds?: string[];
    type?: "link" | "label" | "separator" | "checkbox";
    color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "pending" | "neutral";
    checked?: boolean;
    disabled?: boolean;
    onSelect?: (e: Event) => void;
    onUpdateChecked?: (checked: boolean) => void;
    children?: ContextMenuItem[] | ContextMenuItem[][];
    class?: any;
}
ts
interface MenuItemIcon {
    /**
     * Name of the icon to render, same as the `icon` prop of `UiIcon`.
     */
    name: string;

    /**
     * Colors just the icon, independent of the item's `color` (which tints the whole row) or, in a
     * select, of whether the option is selected.
     */
    color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "pending" | "neutral";

    /**
     * Render the icon's filled variant. Only some icons ship one — the rest ignore this.
     */
    fill?: boolean;
}