Default
With Sub-menu
Checkbox & Radio Items
Sub-components
| Sub-component | Type | Description |
|---|---|---|
| DropdownMenu | Root | Wraps the trigger and content |
| DropdownMenu.Trigger | Component | Element that toggles the menu |
| DropdownMenu.Content | Component | Popover container for items |
| DropdownMenu.Item | Component | A single menu item |
| DropdownMenu.CheckboxItem | Component | Item with a checkbox indicator |
| DropdownMenu.RadioGroup | Component | Groups radio items together |
| DropdownMenu.RadioItem | Component | Item with a radio indicator |
| DropdownMenu.Label | Component | Non-interactive label for grouping |
| DropdownMenu.Separator | Component | Visual separator between items |
| DropdownMenu.Shortcut | Component | Displays a keyboard shortcut hint |
| DropdownMenu.Sub | Component | Wraps a sub-menu trigger and content |
| DropdownMenu.SubTrigger | Component | Item that opens a sub-menu |
| DropdownMenu.SubContent | Component | Content for the sub-menu |
| DropdownMenu.Group | Component | Groups related items |
Usage
<DropdownMenu>
<DropdownMenu.Trigger asChild>
<button>Open Menu</button>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>
Profile <DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.CheckboxItem checked={checked} onCheckedChange={setChecked}>
Status Bar
</DropdownMenu.CheckboxItem>
<DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>
<DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="dark">Dark</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
</DropdownMenu.Content>
</DropdownMenu>