StorybookGitHub

Context Menu

Displays a menu at the pointer, triggered by a right click.

Right click this card

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/context-menu.json

Usage

Use a context menu to surface actions relevant to an element without cluttering the UI, such as copy/paste or item-specific commands on right click. Supports nested submenus, checkbox items, and radio groups via reka-ui's ContextMenu primitive.

<script setup lang="ts">
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
</script>

<template>
  <ContextMenu>
    <ContextMenuTrigger
      class="flex h-32 w-64 items-center justify-center rounded-md border border-dashed text-sm"
    >
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent class="w-48">
      <ContextMenuItem>Back</ContextMenuItem>
      <ContextMenuItem>Forward</ContextMenuItem>
      <ContextMenuItem>Reload</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>