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

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

# ContextMenuContent

**Type**: component

ContextMenuContent - The container for context menu items Contains all menu items, separators, labels, and sub-menus. Automatically positioned relative to the trigger point with collision detection and smooth animations. Renders in a portal by default for proper layering.

## JSX Usage

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

<ContextMenuContent
  asChild={true}
  loop={true}
  onCloseAutoFocus={handleCloseAutoFocus}
  onEscapeKeyDown={handleEscapeKeyDown}
  avoidCollisions={true}
  sideOffset={0}
  className="value"
>
  {/* Your content here */}
</ContextMenuContent>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Merges props with child element instead of rendering wrapper

### loop
- **Type**: `boolean`
- **Required**: No
- **Description**: Enable keyboard navigation looping from last to first item

### onCloseAutoFocus
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: Handle focus return when menu closes

### onEscapeKeyDown
- **Type**: `(event: KeyboardEvent) => void`
- **Required**: No
- **Description**: Handle escape key presses

### avoidCollisions
- **Type**: `boolean`
- **Required**: No
- **Description**: Prevent collisions with viewport boundaries

### sideOffset
- **Type**: `number`
- **Required**: No
- **Description**: Distance in pixels from the cursor/trigger point

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling

### children
- **Type**: `React.ReactNode`
- **Required**: Yes
- **Description**: Menu items, labels, separators, and sub-menus to display

## Examples

### Example 1
```tsx
<ContextMenuContent className="w-56">
  <ContextMenuLabel>Actions</ContextMenuLabel>
  <ContextMenuSeparator />
  <ContextMenuItem>Copy</ContextMenuItem>
  <ContextMenuItem>Paste</ContextMenuItem>
</ContextMenuContent>
```
### Example 2
```tsx
// With event handlers and positioning
<ContextMenuContent
  onCloseAutoFocus={(e) => e.preventDefault()}
  onEscapeKeyDown={(e) => console.log('Escape pressed')}
  avoidCollisions={true}
  sideOffset={4}
  loop={true}
>
  <ContextMenuItem>Item 1</ContextMenuItem>
  <ContextMenuItem>Item 2</ContextMenuItem>
</ContextMenuContent>
```