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

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

# NavigationMenuContent

**Type**: component

NavigationMenuContent - Dropdown content panel for navigation items The collapsible content container that appears when a NavigationMenuTrigger is activated. Supports smooth enter/exit animations, flexible positioning (with or without viewport), and comprehensive interaction handling. The content automatically manages focus and provides multiple ways to dismiss the dropdown (Escape key, outside clicks, etc.).

## JSX Usage

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

<NavigationMenuContent
  asChild={true}
  forceMount={true}
  onEscapeKeyDown={handleEscapeKeyDown}
  onPointerDownOutside={handlePointerDownOutside}
  onFocusOutside={handleFocusOutside}
  onInteractOutside={handleInteractOutside}
/>
```

## Component Props

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

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

### onEscapeKeyDown
- **Type**: `(event: KeyboardEvent) => void`
- **Required**: No
- **Description**: No description available

### onPointerDownOutside
- **Type**: `(event: PointerEvent) => void`
- **Required**: No
- **Description**: No description available

### onFocusOutside
- **Type**: `(event: FocusEvent) => void`
- **Required**: No
- **Description**: No description available

### onInteractOutside
- **Type**: `(event: PointerEvent | FocusEvent) => void`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Grid layout with navigation links
<NavigationMenuContent>
  <div className="grid gap-3 p-6 w-[500px] grid-cols-2">
    <NavigationMenuLink href="/products/analytics">
      <div className="text-sm font-medium">Analytics</div>
      <p className="text-sm text-muted-foreground">Track your performance</p>
    </NavigationMenuLink>
    <NavigationMenuLink href="/products/dashboard">
      <div className="text-sm font-medium">Dashboard</div>
      <p className="text-sm text-muted-foreground">Manage your data</p>
    </NavigationMenuLink>
  </div>
</NavigationMenuContent>
```
### Example 2
```tsx
// Complex multi-column layout
<NavigationMenuContent>
  <div className="grid gap-6 p-8 w-[800px] grid-cols-3">
    <div className="space-y-2">
      <h4 className="text-sm font-medium">Features</h4>
      <NavigationMenuLink href="/features/auth">Authentication</NavigationMenuLink>
      <NavigationMenuLink href="/features/api">API Management</NavigationMenuLink>
    </div>
    <div className="space-y-2">
      <h4 className="text-sm font-medium">Tools</h4>
      <NavigationMenuLink href="/tools/cli">Command Line</NavigationMenuLink>
      <NavigationMenuLink href="/tools/sdk">SDK</NavigationMenuLink>
    </div>
  </div>
</NavigationMenuContent>
```
### Example 3
```tsx
// With custom interaction handlers
<NavigationMenuContent
  onEscapeKeyDown={(e) => {
    console.log('Escape pressed');
    // Don't prevent default to allow normal closing behavior
  }}
  onPointerDownOutside={(e) => {
    console.log('Clicked outside');
    // e.preventDefault() would prevent closing
  }}
>
  <div className="p-6 w-[300px]">
    <NavigationMenuLink href="/help">Help Center</NavigationMenuLink>
  </div>
</NavigationMenuContent>
```
### Example 4
```tsx
// Force mounted for animation control
<NavigationMenuContent forceMount>
  <div className="p-4 w-[250px] animate-in slide-in-from-top">
    <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
  </div>
</NavigationMenuContent>
```