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

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

# NavigationMenuViewport

**Type**: component

NavigationMenuViewport - Positioned container for dropdown content The viewport container that manages positioning, sizing, and animation of NavigationMenuContent panels. It automatically calculates dimensions based on content size and provides smooth enter/exit animations. The viewport uses CSS custom properties for dynamic sizing and positioning. Only rendered when the viewport prop is true (default) on NavigationMenu.

## JSX Usage

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

<NavigationMenuViewport
  asChild={true}
  forceMount={true}
/>
```

## Component Props

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

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

## Examples

### Example 1
```tsx
// Typically used automatically by NavigationMenu
<NavigationMenu>
  <NavigationMenuList>
    // menu items
  </NavigationMenuList>
  // NavigationMenuViewport is rendered automatically
</NavigationMenu>
```
### Example 2
```tsx
// Custom viewport styling
<NavigationMenuViewport className="border-2 border-primary shadow-xl" />
```
### Example 3
```tsx
// Force mounted viewport for animation control
<NavigationMenuViewport forceMount className="custom-animation" />
```