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

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

# DropdownMenuItem

**Type**: component

A single interactive item in the dropdown menu Renders a clickable menu item with proper focus management and keyboard navigation. Supports different visual variants for semantic meaning (e.g., destructive actions). Includes built-in styling for icons, disabled states, and focus indicators.

## JSX Usage

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

<DropdownMenuItem
  disabled={true}
  onSelect={handleSelect}
  textValue="value"
  inset={true}
  variant={value}
  className="value"
>
  {/* Your content here */}
</DropdownMenuItem>
```

## Component Props

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether the item is disabled and cannot be selected

### onSelect
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: Callback fired when the item is selected via click or keyboard

### textValue
- **Type**: `string`
- **Required**: No
- **Description**: Optional text value used for typeahead search functionality

### inset
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to add extra left padding to align with items that have icons

### variant
- **Type**: `"default" | "destructive"`
- **Required**: No
- **Description**: Visual variant of the menu item for semantic distinction

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

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

## Examples

### Example 1
```tsx
// Basic menu item with click handler
<DropdownMenuItem onSelect={() => console.log('Profile clicked')}>
  <User className="mr-2 h-4 w-4" />
  Profile
</DropdownMenuItem>
```
### Example 2
```tsx
// Destructive action item
<DropdownMenuItem variant="destructive" onSelect={handleDelete}>
  <Trash className="mr-2 h-4 w-4" />
  Delete Account
</DropdownMenuItem>
```
### Example 3
```tsx
// Disabled item
<DropdownMenuItem disabled>
  <Settings className="mr-2 h-4 w-4" />
  Settings (Coming Soon)
</DropdownMenuItem>
```
### Example 4
```tsx
// Item with keyboard shortcut
<DropdownMenuItem onSelect={handleSave}>
  Save Document
  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
```