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

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

# ContextMenuSubContent

**Type**: component

ContextMenuSubContent - Container for sub-menu items Contains the items within a sub-menu. Automatically positioned relative to its trigger with collision detection and smooth animations. Supports all the same features as main menu content including keyboard navigation.

## JSX Usage

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

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

## 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 sub-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 trigger anchor

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

### children
- **Type**: `React.ReactNode`
- **Required**: Yes
- **Description**: Sub-menu items, separators, and labels

## Examples

### Example 1
```tsx
<ContextMenuSubContent>
  <ContextMenuItem>Option 1</ContextMenuItem>
  <ContextMenuItem>Option 2</ContextMenuItem>
  <ContextMenuSeparator />
  <ContextMenuItem>Option 3</ContextMenuItem>
</ContextMenuSubContent>
```
### Example 2
```tsx
// With portal and collision avoidance
<ContextMenuSubContent
  avoidCollisions={true}
  sideOffset={8}
  className="min-w-[200px]"
>
  <ContextMenuLabel>Sub Options</ContextMenuLabel>
  <ContextMenuItem>Action A</ContextMenuItem>
  <ContextMenuItem>Action B</ContextMenuItem>
</ContextMenuSubContent>
```