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

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

# DropdownMenu

**Type**: component

A versatile dropdown menu component built on Radix UI primitives Dropdown menus display a list of actions or options that a user can choose from. They're typically triggered by a button and appear as a floating panel with full keyboard navigation support, submenus, and various interactive item types. Built on Radix UI's DropdownMenu primitive with enhanced styling and type safety. Follows the WAI-ARIA Menu Button pattern for accessibility compliance.

## JSX Usage

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

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

## Component Props

### defaultOpen
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether the dropdown is initially open (uncontrolled mode)

### open
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether the dropdown is open (controlled mode)

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: Callback fired when the open state changes

### modal
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether the dropdown should be modal (blocks interaction with outside elements)

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: The reading direction of the dropdown menu

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

## Examples

### Example 1
```tsx
// Basic dropdown menu
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```
### Example 2
```tsx
// Controlled dropdown with alignment
const [open, setOpen] = useState(false);
<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon">
      <MoreHorizontal />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```
### Example 3
```tsx
// Complex menu with checkboxes, radio groups, and submenus
const [showPanel, setShowPanel] = useState(true);
const [position, setPosition] = useState("top");
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Advanced Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>View Options</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
      Show Panel
    </DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
    <DropdownMenuSeparator />
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Email</DropdownMenuItem>
        <DropdownMenuItem>Copy Link</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>
```