120k
New

Context Menu

PreviousNext

Displays a menu of actions triggered by a right click.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/context-menu

Usage

<script setup lang="ts">
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
</script>
 
<template>
  <ContextMenu>
    <ContextMenuTrigger>Right click here</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Profile</ContextMenuItem>
      <ContextMenuItem>Billing</ContextMenuItem>
      <ContextMenuItem>Team</ContextMenuItem>
      <ContextMenuItem>Subscription</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>

Examples

Basic

A simple context menu with a few actions.

Use ContextMenuSub to nest secondary actions.

Shortcuts

Add ContextMenuShortcut to show keyboard hints.

Groups

Group related actions and separate them with dividers.

Icons

Combine icons with labels for quick scanning.

Checkboxes

Use ContextMenuCheckboxItem for toggles.

Radio

Use ContextMenuRadioItem for exclusive choices.

Destructive

Use variant="destructive" to style the menu item as destructive.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.