UNPKG

@neynar/ui

Version:

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

80 lines (70 loc) 2.2 kB
# DropdownMenuSubContent **Type**: component Content container for submenu items Contains the items displayed when a submenu is opened. Positioned relative to the submenu trigger with intelligent collision detection. Supports all the same item types as the main menu content, enabling complex nested menu structures with consistent behavior and styling. ## JSX Usage ```jsx import { DropdownMenuSubContent } from '@neynar/ui'; <DropdownMenuSubContent className={value} ...props={value} /> ``` ## Component Props ### className - **Type**: `unknown` - **Required**: Yes - **Description**: No description available ### ...props - **Type**: `unknown` - **Required**: Yes - **Description**: No description available ## Examples ### Example 1 ```tsx // Basic submenu content with various item types <DropdownMenuSubContent> <DropdownMenuItem> <Mail className="mr-2 h-4 w-4" /> Send via Email </DropdownMenuItem> <DropdownMenuItem> <Link className="mr-2 h-4 w-4" /> Copy Share Link </DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem> <QrCode className="mr-2 h-4 w-4" /> Generate QR Code </DropdownMenuItem> </DropdownMenuSubContent> ``` ### Example 2 ```tsx // Submenu with checkbox items for multi-selection <DropdownMenuSubContent> <DropdownMenuLabel>Export Options</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuCheckboxItem checked={includeMetadata} onCheckedChange={setIncludeMetadata}> Include Metadata </DropdownMenuCheckboxItem> <DropdownMenuCheckboxItem checked={compressFile} onCheckedChange={setCompressFile}> Compress File </DropdownMenuCheckboxItem> <DropdownMenuSeparator /> <DropdownMenuItem>Export Now</DropdownMenuItem> </DropdownMenuSubContent> ``` ### Example 3 ```tsx // Nested submenu structure <DropdownMenuSubContent> <DropdownMenuItem>Basic Export</DropdownMenuItem> <DropdownMenuSub> <DropdownMenuSubTrigger>Advanced Settings</DropdownMenuSubTrigger> <DropdownMenuSubContent> <DropdownMenuItem>High Quality</DropdownMenuItem> <DropdownMenuItem>Custom Resolution</DropdownMenuItem> </DropdownMenuSubContent> </DropdownMenuSub> </DropdownMenuSubContent> ```