Context Menu

Displays a menu of actions or options that appears when the user right-clicks an element.

Basic

Right-click the area to open a simple menu.

Installation

CLI

npx @sonojs/ui@latest add context-menu

Also needsnpm i lucide-react

Usage

context-menu.tsx

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right click</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Profile</ContextMenuItem>
        <ContextMenuItem>Billing</ContextMenuItem>
        <ContextMenuItem>Team</ContextMenuItem>
        <ContextMenuItem>Subscription</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Props

Prop	Type	Default	Description
inset	boolean	—	On Item / SubTrigger / Label / Checkbox / Radio — indent to align with icons.
variant	"default" · "destructive"	"default"	On ContextMenuItem — destructive styles for deletes.
checked	boolean	—	On ContextMenuCheckboxItem — checked state.
disabled	boolean	false	Disables the menu item.