ComponentsOverlays

Dropdown menu

A list of actions with checkbox, radio and nested items.

Playground

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuLabel>Project</DropdownMenuLabel>
    <DropdownMenuItem shortcut="⌘D" onSelect={duplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuItem shortcut="⌘E">Rename</DropdownMenuItem>
    <DropdownMenuItem>Share</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="danger">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "junco";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuItem shortcut="⌘P">Profile</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="danger">Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples#

Checkbox and radio items#

Toggle settings and pick one option without leaving the menu.

Submenu#

API reference#

`DropdownMenu`#

open: Controlled open state.; boolean
onOpenChange: Called when the menu opens or closes.; (open: boolean) => void
modal: Blocks the rest of the page while open.; boolean; Default: true

Prop	Type	Default
`open` Controlled open state.	`boolean`	`–`
`onOpenChange` Called when the menu opens or closes.	`(open: boolean) => void`	`–`
`modal` Blocks the rest of the page while open.	`boolean`	`true`

`DropdownMenuContent`#

align: Alignment against the trigger.; "start" | "center" | "end"; Default: "center"
side: Preferred side; flips when there isn't room.; "top" | "right" | "bottom" | "left"; Default: "bottom"
sideOffset: Gap from the trigger in px.; number; Default: 6

Prop	Type	Default
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"center"`
`side` Preferred side; flips when there isn't room.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset` Gap from the trigger in px.	`number`	`6`

`DropdownMenuItem`#

variant: danger for destructive actions.; "default" | "danger"; Default: "default"
shortcut: Trailing keyboard hint. Visual only: wire the shortcut yourself.; string
inset: Indent to line up with checkbox and radio items.; boolean
onSelect: Runs on click or Enter. event.preventDefault() keeps the menu open.; (event) => void
disabled: Skipped by the keyboard and not selectable.; boolean
asChild: Render your own element (a router Link) as the item.; boolean

Prop	Type	Default
`variant` danger for destructive actions.	`"default" \| "danger"`	`"default"`
`shortcut` Trailing keyboard hint. Visual only: wire the shortcut yourself.	`string`	`–`
`inset` Indent to line up with checkbox and radio items.	`boolean`	`–`
`onSelect` Runs on click or Enter. event.preventDefault() keeps the menu open.	`(event) => void`	`–`
`disabled` Skipped by the keyboard and not selectable.	`boolean`	`–`
`asChild` Render your own element (a router Link) as the item.	`boolean`	`–`

`DropdownMenuCheckboxItem / DropdownMenuRadioItem`#

checked: Checkbox item state, with onCheckedChange.; boolean
value: Radio item value, inside a DropdownMenuRadioGroup with value and onValueChange.; string

Prop	Type	Default
`checked` Checkbox item state, with onCheckedChange.	`boolean`	`–`
`value` Radio item value, inside a DropdownMenuRadioGroup with value and onValueChange.	`string`	`–`

Accessibility#

Keyboard interactions
Key	Action
`Enter`	Opens the menu from the trigger, or selects the focused item.
`Space`	Same as Enter.
`↓↑`	Moves between items.
`→`	Opens a submenu.
`←`	Closes a submenu.
`A–Z`	Jumps to the item starting with that letter.
`Esc`	Closes the menu and returns focus to the trigger.

Uses the menu, menuitem, menuitemcheckbox and menuitemradio roles, with checked states announced.
Danger items say what they do in words; red is an extra cue, not the only one.
Shortcuts are hints only. Implement them yourself so they work without opening the menu.

<DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Options</Button> </DropdownMenuTrigger> <DropdownMenuContent align="start"> <DropdownMenuLabel>Project</DropdownMenuLabel> <DropdownMenuItem shortcut="⌘D" onSelect={duplicate}>Duplicate</DropdownMenuItem> <DropdownMenuItem shortcut="⌘E">Rename</DropdownMenuItem> <DropdownMenuItem>Share</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem variant="danger">Delete</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "junco";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuItem shortcut="⌘P">Profile</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="danger">Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API reference#

`DropdownMenu`#

open: Controlled open state.; boolean
onOpenChange: Called when the menu opens or closes.; (open: boolean) => void
modal: Blocks the rest of the page while open.; boolean; Default: true

Prop	Type	Default
`open` Controlled open state.	`boolean`	`–`
`onOpenChange` Called when the menu opens or closes.	`(open: boolean) => void`	`–`
`modal` Blocks the rest of the page while open.	`boolean`	`true`

`DropdownMenuContent`#

align: Alignment against the trigger.; "start" | "center" | "end"; Default: "center"
side: Preferred side; flips when there isn't room.; "top" | "right" | "bottom" | "left"; Default: "bottom"
sideOffset: Gap from the trigger in px.; number; Default: 6

Prop	Type	Default
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"center"`
`side` Preferred side; flips when there isn't room.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset` Gap from the trigger in px.	`number`	`6`

`DropdownMenuItem`#

variant: danger for destructive actions.; "default" | "danger"; Default: "default"
shortcut: Trailing keyboard hint. Visual only: wire the shortcut yourself.; string
inset: Indent to line up with checkbox and radio items.; boolean
onSelect: Runs on click or Enter. event.preventDefault() keeps the menu open.; (event) => void
disabled: Skipped by the keyboard and not selectable.; boolean
asChild: Render your own element (a router Link) as the item.; boolean

Prop	Type	Default
`variant` danger for destructive actions.	`"default" \| "danger"`	`"default"`
`shortcut` Trailing keyboard hint. Visual only: wire the shortcut yourself.	`string`	`–`
`inset` Indent to line up with checkbox and radio items.	`boolean`	`–`
`onSelect` Runs on click or Enter. event.preventDefault() keeps the menu open.	`(event) => void`	`–`
`disabled` Skipped by the keyboard and not selectable.	`boolean`	`–`
`asChild` Render your own element (a router Link) as the item.	`boolean`	`–`

`DropdownMenuCheckboxItem / DropdownMenuRadioItem`#

checked: Checkbox item state, with onCheckedChange.; boolean
value: Radio item value, inside a DropdownMenuRadioGroup with value and onValueChange.; string

Prop	Type	Default
`checked` Checkbox item state, with onCheckedChange.	`boolean`	`–`
`value` Radio item value, inside a DropdownMenuRadioGroup with value and onValueChange.	`string`	`–`

Accessibility#

Keyboard interactions
Key	Action
`Enter`	Opens the menu from the trigger, or selects the focused item.
`Space`	Same as Enter.
`↓↑`	Moves between items.
`→`	Opens a submenu.
`←`	Closes a submenu.
`A–Z`	Jumps to the item starting with that letter.
`Esc`	Closes the menu and returns focus to the trigger.

Uses the menu, menuitem, menuitemcheckbox and menuitemradio roles, with checked states announced.

Danger items say what they do in words; red is an extra cue, not the only one.

Shortcuts are hints only. Implement them yourself so they work without opening the menu.

Playground#

Usage#

Examples#

Checkbox and radio items#

Submenu#

API reference#

DropdownMenu#

DropdownMenuContent#

DropdownMenuItem#

DropdownMenuCheckboxItem / DropdownMenuRadioItem#

Accessibility#

Playground#

Usage#

Examples#

Checkbox and radio items#

Submenu#

API reference#

DropdownMenu#

DropdownMenuContent#

DropdownMenuItem#

DropdownMenuCheckboxItem / DropdownMenuRadioItem#

Accessibility#

`DropdownMenu`#

`DropdownMenuContent`#

`DropdownMenuItem`#

`DropdownMenuCheckboxItem / DropdownMenuRadioItem`#

`DropdownMenu`#

`DropdownMenuContent`#

`DropdownMenuItem`#

`DropdownMenuCheckboxItem / DropdownMenuRadioItem`#