UNPKG

@neynar/ui

Version:

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

84 lines (72 loc) 2 kB
# 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> ```