Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Installation
Usage
<DropdownMenu>
<DropdownMenu.Trigger render={<Button variant=Outline />}>
{"Open"->React.string}
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.Label> {"My Account"->React.string} </DropdownMenu.Label>
<DropdownMenu.Item> {"Profile"->React.string} </DropdownMenu.Item>
<DropdownMenu.Item> {"Billing"->React.string} </DropdownMenu.Item>
<DropdownMenu.Separator />
</DropdownMenu.Group>
<DropdownMenu.Group>
<DropdownMenu.Item> {"Team"->React.string} </DropdownMenu.Item>
<DropdownMenu.Item> {"Subscription"->React.string} </DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu>Examples
Basic
A basic dropdown menu with labels and separators.
Submenu
Use DropdownMenu.Sub to nest secondary actions.
Shortcuts
Add DropdownMenu.Shortcut to show keyboard hints.
Icons
Combine icons with labels for quick scanning.
Checkboxes
Use DropdownMenu.CheckboxItem for toggles.
Checkboxes Icons
Add icons to checkbox items.
Radio Group
Use DropdownMenu.RadioGroup for exclusive choices.
Radio Icons
Show radio options with icons.
Destructive
Use variant=Destructive for irreversible actions.
Avatar
An account switcher dropdown triggered by an avatar.
Complex
A richer example combining groups, icons, and submenus.
API Reference
See the Base UI documentation for the full API reference.