Context Menu ^0.1.23

Right-click contextual menu with the same look and feel as the Dropdown Menu — positioned at cursor, viewport-aware, keyboard-navigable (arrows, Enter, Home/End, Escape), and auto-closes on outside click, scroll, or resize.

Re-uses all of the Dropdown Menu sub-components — VxContextMenuItem, VxContextMenuLabel, VxContextMenuSeparator, VxContextMenuShortcut, VxContextMenuGroup.

1. Basic

Right-click anywhere inside the card.

Right-click here

<script setup lang="ts">
import { VxContextMenu, VxContextMenuItem, VxContextMenuSeparator } from 'veloxui'
</script>

<template>
  <VxContextMenu>
    <div>Right-click here</div>
    <template #menu>
      <VxContextMenuItem @select="newFile">New file</VxContextMenuItem>
      <VxContextMenuItem @select="newFolder">New folder</VxContextMenuItem>
      <VxContextMenuSeparator />
      <VxContextMenuItem @select="refresh">Refresh</VxContextMenuItem>
    </template>
  </VxContextMenu>
</template>

2. With icons and shortcuts

Icons align to the left, shortcuts push to the right.

Right-click for edit actions

<VxContextMenu>
  <div>Right-click here</div>
  <template #menu>
    <VxContextMenuItem @select="cut">
      <CutIcon /> Cut <VxContextMenuShortcut>⌘X</VxContextMenuShortcut>
    </VxContextMenuItem>
  </template>
</VxContextMenu>

3. With labels and groups

Group related actions with a label and separators.

Right-click for file menu

<VxContextMenu>
  <div>Right-click me</div>
  <template #menu>
    <VxContextMenuLabel>File — report.pdf</VxContextMenuLabel>
    <VxContextMenuSeparator />
    <VxContextMenuGroup>
      <VxContextMenuItem>Open</VxContextMenuItem>
      <VxContextMenuItem>Open with…</VxContextMenuItem>
    </VxContextMenuGroup>
  </template>
</VxContextMenu>

4. Destructive actions

Highlight destructive actions with the destructive prop.

Right-click for destructive menu

<VxContextMenuItem destructive @select="del">
  Delete <VxContextMenuShortcut>⌫</VxContextMenuShortcut>
</VxContextMenuItem>

5. Disabled items

Items with disabled are greyed out and ignored by keyboard navigation.

Right-click — some items are disabled

<VxContextMenuItem :disabled="!canPaste" @select="paste">Paste</VxContextMenuItem>

6. File list — per-row context menu

A typical file browser pattern — each row has its own context menu.

Q4 report.pdf

2.1 MB

right-click

team-photo.jpg

4.8 MB

right-click

budget.xlsx

128 KB

right-click

design-v2.fig

12.4 MB

right-click

<VxContextMenu v-for="f in files" :key="f.id">
  <FileRow :file="f" />
  <template #menu>
    <VxContextMenuItem @select="open(f)">Open</VxContextMenuItem>
    <VxContextMenuItem destructive @select="del(f)">Delete</VxContextMenuItem>
  </template>
</VxContextMenu>

7. Text selection — formatting menu

Real-world example: a rich-text area with context actions.

Right-click to select an action on this text.

<VxContextMenu>
  <RichTextArea v-model="text" />
  <template #menu>
    <VxContextMenuItem @select="wrap('**', '**')">Bold</VxContextMenuItem>
    <VxContextMenuItem @select="wrap('*', '*')">Italic</VxContextMenuItem>
  </template>
</VxContextMenu>

8. Viewport edge — auto-flip

The menu stays on-screen by flipping horizontally, vertically, or both when it would otherwise spill over a viewport edge. Try right-clicking anywhere inside the cards below — especially near the right or bottom edge of your viewport — and use the corner buttons to jump to the actual viewport corners.

Left card
right-click anywhere inside

Right card
right-click near the right edge

<script setup lang="ts">
import { ref } from 'vue'
const menu = ref<InstanceType<typeof VxContextMenu>>()

function openAtCorner(pos: 'tl' | 'tr' | 'bl' | 'br') {
  const pad = 6
  const x = pos === 'tl' || pos === 'bl' ? pad : window.innerWidth - pad
  const y = pos === 'tl' || pos === 'tr' ? pad : window.innerHeight - pad
  menu.value?.open({ clientX: x, clientY: y })
}
</script>

<template>
  <VxContextMenu ref="menu">
    <div>Right-click here — menu flips automatically near viewport edges</div>
    <template #menu>
      <VxContextMenuItem>Action 1</VxContextMenuItem>
      <VxContextMenuItem>Action 2</VxContextMenuItem>
    </template>
  </VxContextMenu>
</template>

Props

Name	Type	Default	Description
disabled	boolean	false	Disable the context menu entirely (browser's default menu will show).
width	string	''	Optional fixed width for the menu (e.g. '200px').
triggerClass	ClassBinding	''	Class(es) on the trigger wrapper.
contentClass	ClassBinding	''	Class(es) on the menu content.

Events

Name	Payload	Description
open	MouseEvent	The menu was opened — the original right-click event is forwarded.
close	—	The menu was closed (click outside, Escape, item select, scroll, etc.).

Slots

Name	Description
default	The trigger — the element users right-click on.
menu	The menu content. Use VxContextMenuItem, VxContextMenuLabel, VxContextMenuSeparator, VxContextMenuShortcut, VxContextMenuGroup.

Exposed methods

Accessible via a template ref.

Name	Signature	Description
open	(e: { clientX, clientY }) => void	Programmatically open the menu at a given screen position.
close	() => void	Close the menu.
isOpen	() => boolean	Current open state.

Sub-components

The context menu shares its item components with the Dropdown Menu — the visual styling is identical.

Component	Props	Notes
VxContextMenuItem	disabled, destructive, inset	Emits select when clicked.
VxContextMenuLabel	inset	Non-interactive label / section header.
VxContextMenuSeparator	—	Divider line.
VxContextMenuShortcut	—	Muted label aligned to the right of an item.
VxContextMenuGroup	—	Logical grouping (no visual effect).