Context Menu

Right click here

Installation

npx shadcn@latest add @uqudo/context-menu

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

ContextMenuContent already renders inside a portal, so you do not need to add ContextMenuPortal yourself. Use inset on items to align them with items that have a check indicator.

API Reference

ContextMenuItem

Prop

Type

ContextMenuCheckboxItem

Prop

Type

ContextMenuRadioGroup / ContextMenuRadioItem

Prop

Type

Exports

Every part forwards className and all props of the matching Radix primitive.

Component	Wraps	Notes
`ContextMenu`	`ContextMenu.Root`	Accepts `onOpenChange`, `modal`, `dir`.
`ContextMenuTrigger`	`ContextMenu.Trigger`	The element that opens the menu on right click / long press.
`ContextMenuContent`	`ContextMenu.Content`	Portalled and animated panel. Accepts `alignOffset`, `loop`...
`ContextMenuItem`	`ContextMenu.Item`	See above.
`ContextMenuCheckboxItem`	`ContextMenu.CheckboxItem`	See above.
`ContextMenuRadioGroup`	`ContextMenu.RadioGroup`	See above.
`ContextMenuRadioItem`	`ContextMenu.RadioItem`	See above.
`ContextMenuLabel`	`ContextMenu.Label`	Muted heading. Accepts `inset`.
`ContextMenuSeparator`	`ContextMenu.Separator`	Horizontal rule.
`ContextMenuShortcut`	`<span>`	Right-aligned muted text for a keyboard shortcut.
`ContextMenuGroup`	`ContextMenu.Group`	Groups related items.
`ContextMenuPortal`	`ContextMenu.Portal`	Only needed for custom content outside `ContextMenuContent`.
`ContextMenuSub`	`ContextMenu.Sub`	Wraps a sub menu. Accepts `open`, `defaultOpen`, `onOpenChange`.
`ContextMenuSubTrigger`	`ContextMenu.SubTrigger`	Item that opens the sub menu; appends a chevron. Accepts `inset`.
`ContextMenuSubContent`	`ContextMenu.SubContent`	Panel of the sub menu.

Data attributes

Attribute	Element	Value
`data-slot`	every part	`context-menu`, `context-menu-item`, ...
`data-variant`	item	The resolved `variant`.
`data-inset`	item, sub trigger, label, ...	`true` when `inset` is set.
`data-state`	content, sub trigger, checkbox	Set by Radix (`open`, `checked`, ...).

On this page