NAMCHE UI

Context Menu

A menu that opens at the pointer on right-click, scoped to the element it wraps.

SirdarLive

Install

pnpm dlx shadcn@latest add @namche/context-menu

Usage

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

<ContextMenu>
  <ContextMenuTrigger className="rounded-lg border px-3 py-2">
    Sirdar
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>View logs</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete deployment</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

ContextMenuTrigger wraps the target area directly — it isn't a render-prop control like the other triggers in this category, since it needs to own the right-click surface itself. ContextMenuContent defaults to side="right"/align="start", matching where a right-click menu should open relative to the cursor. It also exports ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent for nested menus, ContextMenuCheckboxItem and ContextMenuRadioItem for toggleable state, and ContextMenuItem's variant="destructive" for dangerous actions.

On this page