Dropdown Menu
A menu that appears when clicking a trigger element.
Usage Examples
Basic Usage
Implement a dropdown menu triggered by a button click.
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Item 1</DropdownMenuItem>
<DropdownMenuItem>Item 2</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>With Checkbox Items
Add items with a checkbox to track selection states.
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuCheckboxItem
checked={true}
onCheckedChange={(checked) => console.log(checked)}
>
Checkbox Item
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>With Radio Group
Group items for single selection using a radio group.
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuRadioGroup
value="option1"
onValueChange={(value) => console.log(value)}
>
<DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>Props
Name
Type
Default
Description
DropdownMenu
React.Component
-
The container component for the dropdown menu.
DropdownMenuTrigger
React.Component
-
The trigger element that toggles the dropdown menu.
DropdownMenuContent
React.Component
-
The container for dropdown menu items.
DropdownMenuItem
React.Component
-
A clickable item in the dropdown menu.
DropdownMenuCheckboxItem
React.Component
-
An item with a checkbox to toggle selection.
DropdownMenuRadioGroup
React.Component
-
Groups radio items for single selection.
DropdownMenuRadioItem
React.Component
-
An individual radio item within a radio group.
DropdownMenuSeparator
React.Component
-
A separator to divide dropdown menu sections.