@neynar/ui/llm-docs/context-menu.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ContextMenu

**Type**: component

ContextMenu - A contextual menu that appears on right-click or long-press Context menus provide contextual actions for specific elements or areas. Built on Radix UI primitives, they appear when users right-click (or long-press on touch devices) and offer actions relevant to the clicked item or region.

## JSX Usage

```jsx
import { ContextMenu } from '@neynar/ui';

<ContextMenu
  dir={value}
  onOpenChange={handleOpenChange}
  modal={true}
>
  {/* Your content here */}
</ContextMenu>
```

## Component Props

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

### modal
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic context menu with items
<ContextMenu>
  <ContextMenuTrigger>
    <div className="border rounded p-4">
      Right-click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```
### Example 2
```tsx
// With sub-menus and shortcuts
<ContextMenu>
  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Edit <ContextMenuShortcut>⌘E</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Email</ContextMenuItem>
        <ContextMenuItem>Copy Link</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>
```
### Example 3
```tsx
// With checkboxes and radio groups
<ContextMenu>
  <ContextMenuTrigger>Settings Menu</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>Preferences</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
      Show Toolbar
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
      Show Sidebar
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
      <ContextMenuRadioItem value="light">Light Theme</ContextMenuRadioItem>
      <ContextMenuRadioItem value="dark">Dark Theme</ContextMenuRadioItem>
      <ContextMenuRadioItem value="system">System Theme</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>
```