# Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
## When to use
* Offer a list of actions or options behind a button, such as row actions or an account menu.
* Group related items with `DropdownMenuGroup`, `DropdownMenuLabel` and `DropdownMenuSeparator`.
## How it works
`DropdownMenu` opens `DropdownMenuContent` in a portal next to `DropdownMenuTrigger`. It supports plain items, checkbox items, radio groups, shortcuts and nested submenus (`DropdownMenuSub`), with full keyboard navigation. With Base UI it builds on `@base-ui/react/menu`; with Radix on the `DropdownMenu` primitive from `radix-ui`.
## Example
### Base UI
```tsx
'use client'
import { Button } from "@/shadcn/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/shadcn/base/ui/dropdown-menu"
export default function DropdownMenuDemo() {
return (
}>
Open
My Account
Profile
⇧⌘P
Billing
⌘B
Settings
⌘S
Team
Invite users
Email
Message
More...
New Team
⌘+T
GitHub
Support
API
Log out
⇧⌘Q
)
}
```
```tsx [components/ui/dropdown-menu.tsx]
"use client"
import * as React from "react"
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
import { cn } from "cn"
import { ChevronRightIcon, CheckIcon } from "lucide-react"
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
return
}
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
return
}
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
return
}
function DropdownMenuContent({
align = "start",
alignOffset = 0,
side = "bottom",
sideOffset = 4,
className,
...props
}: MenuPrimitive.Popup.Props &
Pick<
MenuPrimitive.Positioner.Props,
"align" | "alignOffset" | "side" | "sideOffset"
>) {
return (
)
}
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
return
}
function DropdownMenuLabel({
className,
inset,
...props
}: MenuPrimitive.GroupLabel.Props & {
inset?: boolean
}) {
return (
)
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: MenuPrimitive.Item.Props & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
)
}
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
return
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: MenuPrimitive.SubmenuTrigger.Props & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuSubContent({
align = "start",
alignOffset = -3,
side = "right",
sideOffset = 0,
className,
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
inset,
...props
}: MenuPrimitive.CheckboxItem.Props & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
return (
)
}
function DropdownMenuRadioItem({
className,
children,
inset,
...props
}: MenuPrimitive.RadioItem.Props & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuSeparator({
className,
...props
}: MenuPrimitive.Separator.Props) {
return (
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
)
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}
```
### Radix
```tsx
'use client'
import { Button } from "@/shadcn/radix/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/shadcn/radix/ui/dropdown-menu"
export default function DropdownMenuDemo() {
return (
My Account
Profile
⇧⌘P
Billing
⌘B
Settings
⌘S
Team
Invite users
Email
Message
More...
New Team
⌘+T
GitHub
Support
API
Log out
⇧⌘Q
)
}
```
```tsx [components/ui/dropdown-menu.tsx]
"use client"
import * as React from "react"
import { cn } from "cn"
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
import { CheckIcon, ChevronRightIcon } from "lucide-react"
function DropdownMenu({
...props
}: React.ComponentProps) {
return
}
function DropdownMenuPortal({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuContent({
className,
align = "start",
sideOffset = 4,
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuGroup({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
)
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
inset,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuRadioItem({
className,
children,
inset,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
)
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
)
}
function DropdownMenuSub({
...props
}: React.ComponentProps) {
return
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuSubContent({
className,
...props
}: React.ComponentProps) {
return (
)
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}
```
## Installation
```bash
npx shadcn@latest add dropdown-menu
```
## Reference
Official page: https://ui.shadcn.com/docs/components/dropdown-menu