Overlays
Dropdown menu
A list of actions or options from a button. Items, checkboxes, radios, labels and submenus, on a blurred dark popup.
packages/design-system/components/ui/dropdown-menu.tsx
Examples
Anatomy
- 01Trigger
- 02Popup, min-w-48, dark and blurred
- 03Groups with labels
- 04Items with icons and shortcuts
- 05Separators
Usage
import {
DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger,
} from "@repo/design-system/components/ui/dropdown-menu";
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline" />}>Project</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={invite}>Invite client</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onClick={archive}>Archive</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen | boolean | none | Controlled or uncontrolled open state, on the root. |
| onOpenChange | (open: boolean, details) => void | none | Called when the popup opens or closes. |
| DropdownMenuTrigger render | ReactElement | (props, state) => ReactElement | none | Base UI's replacement for asChild: render the part as another element, such as a Button or a Link. |
| DropdownMenuItem variant | "default" | "destructive" | "default" | Destructive colours the item and its icon red. |
| inset | boolean | none | On items and labels: indent to line up with items that have an icon or check. |
| DropdownMenuLabel | GroupLabel | none | Must sit inside a DropdownMenuGroup. |
| side | "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end" | none | Which side of the trigger the popup opens on. |
| align | "start" | "center" | "end" | "start" | How the popup lines up with the trigger along that side. |
| sideOffset | number | 4 | The gap between trigger and popup, in pixels. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Group related items and label the groups.
- Put destructive items last, after a separator.
Don't
- Use it for navigation between pages.