Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Installation
npm i @radix-ui/react-dropdown-menuUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function DropdownMenuDemo() {
return (
<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}Examples
With Icons
With Submenu
With Checkboxes
With Radio Group
Props
| Component | Props | Description |
|---|---|---|
| DropdownMenu | - | Wrapper component that provides context to the menu. |
| DropdownMenuTrigger | asChild?: boolean | Use to trigger the dropdown. Set asChild if wrapping a custom element. |
| DropdownMenuContent | align?: "start" | "center" | "end" sideOffset?: number collisionPadding?: number | Controls alignment and positioning of the menu content. |
| DropdownMenuItem | disabled?: boolean inset?: boolean | Represents a clickable item in the menu. Use inset to offset the item. |
| DropdownMenuLabel | inset?: boolean | Used to label a group of items inside the dropdown. |
| DropdownMenuSeparator | - | Adds a visual separator between items. |
| DropdownMenuShortcut | - | Displays keyboard shortcut text next to a menu item. |