Context Menu

Overlay

A right-click contextual menu. Wrap any content to attach a context menu.

Props

Prop	Type	Default	Description
`items`*	`DsContextMenuItem[]`	—	Menu items with label, action(), shortcut?, danger?, disabled?, type: "separator".

Examples

Right-click area

vue

<DsContextMenu :items="[
  { label: 'Open', action: () => {} },
  { label: 'Copy link', shortcut: '⌘C', action: () => {} },
  { type: 'separator' },
  { label: 'Delete', danger: true, action: () => {} },
]">
  <div class="p-8 rounded-ds-lg border border-dashed border-ds-border text-sm text-ds-fg-muted text-center">
    Right-click me
  </div>
</DsContextMenu>

Accessibility

role="menu" with role="menuitem" for each item.
ESC closes the menu.
Click outside closes.
Disabled items prevent action.

Command Palette

LoadingOverlay