Context Menu

Ready

Right-click context menu with keyboard navigation and custom actions

Interactive Preview

Right-click on the card below to open the context menu

Right-click me!

With Section Labels

Organize menu items with labels

Project Document

Right-click to see organized menu with labels

Usage

How to use the ContextMenu component

<ContextMenu>
  <ContextMenuTrigger>
    <div>Right-click me!</div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem icon={Copy} shortcut="⌘C">
      Copy
    </ContextMenuItem>
    <ContextMenuItem icon={Edit} shortcut="⌘E">
      Edit
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>Danger Zone</ContextMenuLabel>
    <ContextMenuItem icon={Trash2} destructive>
      Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API Reference

ContextMenuItem

icon-Component - Icon component

shortcut-string - Keyboard shortcut text

destructive-boolean - Destructive action styling (default: false)

onSelect-() => void - Click handler