Dropdown Menu
A menu of actions revealed from a trigger, with submenus and selectable items.
- Overlays
- 1 file
- 1 npm package
- Accessibility notes
pnpm dlx @dowel-ui/cli add dropdown-menunpm packages installed: radix-ui.
import { DropdownMenu } from "@/components/ui/dropdown-menu";Default
With Submenu
Selectable
Spring Stagger
<DropdownMenuContent>
Every prop of Radix UI’s DropdownMenu.Content, plus className.
<DropdownMenuItem>
| Prop | Type | Default |
|---|---|---|
insetIndents the item to align with items that have a leading indicator. | boolean | — |
variantStyles the item as destructive. Pair with a label that says what is destroyed. | "default" | "destructive" | "default" |
Every prop of Radix UI’s DropdownMenu.Item, plus className.
<DropdownMenuCheckboxItem>
Every prop of Radix UI’s DropdownMenu.CheckboxItem, plus className.
<DropdownMenuRadioItem>
Every prop of Radix UI’s DropdownMenu.RadioItem, plus className.
<DropdownMenuLabel>
| Prop | Type | Default |
|---|---|---|
inset | boolean | — |
Every prop of Radix UI’s DropdownMenu.Label, plus className.
<DropdownMenuSeparator>
Every prop of Radix UI’s DropdownMenu.Separator, plus className.
<DropdownMenuShortcut>
Plus every attribute of <span>.
<DropdownMenuSubTrigger>
| Prop | Type | Default |
|---|---|---|
inset | boolean | — |
Every prop of Radix UI’s DropdownMenu.SubTrigger, plus className.
<DropdownMenuSubContent>
Every prop of Radix UI’s DropdownMenu.SubContent, plus className.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes