Components / Overlays

ContextMenu

A pointer-, keyboard-, and long-press-invoked menu positioned at the interaction point.

Preview

Project row Right-click or press Shift+F10

Install

Run in your project

npx @getweini/cli@latest add context-menu

Use cases

File actions

Offer context-specific commands on a file tile through right-click, keyboard, or long press.

Selected item menu

Apply commands to the exact item whose trigger opened the menu.

Usage example

Vue

<ContextMenu :width="232" @select="runAction">
  <ContextMenuTrigger class="rounded-ui bg-muted px-3 py-3 focus-visible:ring-2 focus-visible:ring-ring">
    Project row
  </ContextMenuTrigger>
  <ContextMenuContent aria-label="Project actions">
    <ContextMenuItem id="open" label="Open project"><template #prefix><OpenIcon aria-hidden="true" /></template>Open project<template #suffix><Kbd size="sm">↵</Kbd></template></ContextMenuItem>
    <ContextMenuItem id="duplicate" label="Duplicate project">Duplicate project</ContextMenuItem>
    <ContextMenuItem id="share" label="Copy project link">Copy project link</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem id="archive" label="Archive project" destructive>Archive project</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

More examples

File commands

ContextMenuItem uses the installed context-menu child.

File commands

<script setup lang="ts">
import ContextMenu from './components/ui/context-menu/ContextMenu.vue'
import ContextMenuTrigger from './components/ui/context-menu/ContextMenuTrigger.vue'
import ContextMenuContent from './components/ui/context-menu/ContextMenuContent.vue'
import ContextMenuItem from './components/ui/context-menu/ContextMenuItem.vue'
</script>
<template>
  <ContextMenu @select="$emit('fileAction', $event.id)">
    <ContextMenuTrigger tabindex="0">Quarterly report.pdf</ContextMenuTrigger>
    <ContextMenuContent aria-label="File actions">
      <ContextMenuItem id="open" label="Open">Open</ContextMenuItem>
      <ContextMenuItem id="duplicate" label="Duplicate">Duplicate</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>

Destructive choice

Keep the destructive action distinct from ordinary commands.

Destructive choice

<script setup lang="ts">
import ContextMenu from './components/ui/context-menu/ContextMenu.vue'
import ContextMenuTrigger from './components/ui/context-menu/ContextMenuTrigger.vue'
import ContextMenuContent from './components/ui/context-menu/ContextMenuContent.vue'
import ContextMenuItem from './components/ui/context-menu/ContextMenuItem.vue'
import ContextMenuSeparator from './components/ui/context-menu/ContextMenuSeparator.vue'
</script>
<template>
  <ContextMenu :long-press-delay="700" @select="$emit('action', $event.id)">
    <ContextMenuTrigger tabindex="0">Project card</ContextMenuTrigger>
    <ContextMenuContent aria-label="Project actions">
      <ContextMenuItem id="share" label="Share">Share</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem id="archive" label="Archive" destructive>Archive</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for ContextMenu
Name	Type	Default or requirement
`v-model:open / defaultOpen`	boolean	false
`longPressDelay`	number, ms	600
`dir`	ltr \| rtl	ltr

Open the menu with right-click, the keyboard, or a long press. Add #prefix and #suffix content to action, checkbox, radio, and submenu items; shortcuts stay between the label and suffix.

Implementation notes

The Context Menu key and Shift+F10 open at the focused trigger; pointer opening uses its interaction point.
Menu selection emits an action for the application to execute.

Accessibility and localization

Make a custom trigger keyboard-focusable, and provide an ordinary visible route to important actions.
Localize the menu name, item labels, and any displayed shortcut hints.