Context Menu

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from '@vitnode/core/components/ui/context-menu'

<ContextMenu>
  <ContextMenuTrigger className="flex h-40 items-center justify-center rounded-xl border-2 border-dashed">
    Right-click here
  </ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuItem>
      Reload
      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Right-click the trigger, or long-press it on touch. The menu opens right under your cursor or finger.

SubmenusCopy Anchor Link

Nest a ContextMenuSub for the rarely used stuff. It opens on hover, click or the right arrow.

<ContextMenuSub>
  <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
  <ContextMenuSubContent className="w-48">
    <ContextMenuItem>Developer tools</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

Checkbox and radio itemsCopy Anchor Link

ContextMenuCheckboxItem toggles on its own, items in a ContextMenuRadioGroup pick one. Both work controlled or uncontrolled.

<ContextMenuCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
  Show bookmarks bar
</ContextMenuCheckboxItem>
<ContextMenuRadioGroup onValueChange={setPerson} value={person}>
  <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
</ContextMenuRadioGroup>

The check mark sits at the start of the row, like in the Dropdown Menu. Add inset to plain items, labels and sub-triggers in the same menu so their text lines up.

Shortcuts and destructive itemsCopy Anchor Link

ContextMenuShortcut is only a label: bind the keys yourself. Use variant="destructive" for actions you can't take back.

<ContextMenuItem variant="destructive">
  <Trash2Icon />
  Delete
  <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
</ContextMenuItem>

Always offer another wayCopy Anchor Link

Nothing on screen says "right-click me", and keyboard users can't open a context menu at all. Put every action somewhere visible too, like the ⋯ Dropdown Menu on each row above.

AccessibilityCopy Anchor Link

• Once open, arrow keys move between items, right opens a submenu, a letter jumps to a match and Escape closes it.
• The trigger sets select-none, so a long-press doesn't start a text selection. Rows grow to a 44px tap target on touch screens.
• Reduced motion turns the scale-in off.

PropsCopy Anchor Link

ContextMenuCopy Anchor Link

ContextMenuContentCopy Anchor Link

ContextMenuItemCopy Anchor Link

ContextMenuCheckboxItem takes checked, defaultChecked and onCheckedChange; ContextMenuRadioGroup takes value, defaultValue and onValueChange. Both item types accept inset and disabled too.

API ReferenceCopy Anchor Link

Base UI - Context Menu