Context Menu · humanonlyweb/ui

Examples

Basic

As in Menu, { separator: true } draws a line between groups.

report.pdfRight-click, long-press, or focus and press Shift+F10

API

Prop	Type	Default
`items` Menu items in order; `{ separator: true }` draws a line between groups.	`MenuEntry<T>[]`	`[]`
`label` Accessible name for the menu. Defaults to the `contextMenu` translation.	`string`	—
`disabled` Leaves the browser's own context menu in place.	`boolean`	`false`
`open` Whether the menu is open.	`boolean`	`false`

Event	Payload
`select` An item was activated.	`[value: T]`
`update:open` `v-model:open` update.	`[value: boolean]`

Slot	Props
`default` The area that opens the menu on right-click, long-press, or Shift+F10.	—
`item` Item content.	`{ item: MenuItem<T>; active: boolean; }`

Types

export type MenuEntry<T extends SelectValue = SelectValue> = MenuItem<T> | MenuSeparator;

export interface MenuItem<T extends SelectValue = SelectValue> extends SelectOption<T> {
  /** Trailing text, e.g. a shortcut like "⌘S". Render richer content via the `item` slot. */
  hint?: string;
}

export type SelectValue = string | number;

/** A line between groups of menu items. */
export interface MenuSeparator {
  separator: true;
}

export interface SelectOption<T extends SelectValue = SelectValue> {
  label: string;
  value: T;
  disabled?: boolean;
}

Styling

Its items use Menu's styling hooks.

Parts: context-menucontext-menu-anchormenu-listmenu-separatormenu-itemmenu-item-labelmenu-item-hint
States: data-context-menu-opendata-menu-indexdata-menu-active

Keyboard

Keys	Action
`Shift` + `F10` / Menu key	Open from the focused element
`↓` / `↑`	Move between items
`Home` / `End`	First / last item
Letters	Jump to an item by label
`Enter` / `Space`	Activate
`Escape`	Close and return focus

Accessibility

Make the area focusable (tabindex="0") so keyboard users can open it.
Long-press opens it on touch, including iOS Safari, which has no contextmenu event.