@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
84 lines (72 loc) • 2 kB
Markdown
# DropdownMenuSubTrigger
**Type**: component
Trigger element for opening a submenu Displays an arrow indicator and opens the associated submenu on hover or keyboard navigation. Must be used within a DropdownMenuSub component. Automatically includes a chevron icon to indicate submenu availability and handles focus states.
## JSX Usage
```jsx
import { DropdownMenuSubTrigger } from '@neynar/ui';
<DropdownMenuSubTrigger
className={value}
inset={value}
...props={value}
>
{/* Your content here */}
</DropdownMenuSubTrigger>
```
## Component Props
### className
- **Type**: `unknown`
- **Required**: Yes
- **Description**: No description available
### inset
- **Type**: `unknown`
- **Required**: Yes
- **Description**: No description available
### children
- **Type**: `unknown`
- **Required**: Yes
- **Description**: No description available
### ...props
- **Type**: `unknown`
- **Required**: Yes
- **Description**: No description available
## Examples
### Example 1
```tsx
// Basic submenu trigger with icon
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Share className="mr-2 h-4 w-4" />
Share Options
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Email Link</DropdownMenuItem>
<DropdownMenuItem>Copy to Clipboard</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
```
### Example 2
```tsx
// Submenu trigger with inset alignment
<DropdownMenuContent>
<DropdownMenuItem>
<FileText className="mr-2 h-4 w-4" />
Open File
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger inset>
Recent Files
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Document.pdf</DropdownMenuItem>
<DropdownMenuItem>Presentation.pptx</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent>
```
### Example 3
```tsx
// Disabled submenu trigger
<DropdownMenuSubTrigger disabled>
Advanced Options (Pro Only)
</DropdownMenuSubTrigger>
```