Dropdown Menu

A menu of actions hung off a trigger. Unlike Select this is a list of commands, not a value — items are buttons, the menu closes on activation, and focus returns to the trigger.

src/components/ui/dropdown-menu.tsx

About

From the component's own source, where it was written.

A menu of actions hung off a trigger.

Unlike Select this is a list of commands, not a value — so items are buttons with role="menuitem", the menu closes on activation, and focus goes back to the trigger. Roving focus is done by querying the menu on keydown, which keeps conditionally rendered items in the right order.

Install

npx astralyx-ui add dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/ui/dropdown-menu'

<DropdownMenu>
  <DropdownMenuTrigger asChild><Button>Actions</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onSelect={edit}>Edit</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Composer

Change the props and the source below follows.

Props

side

align

checkbox items

tsx

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline" size="icon"><MoreHorizontal /></Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuItem>Edit<DropdownMenuShortcut>⌘E</DropdownMenuShortcut></DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Default

tsx

<DropdownMenu>…</DropdownMenu>

With checkbox items

tsx

<DropdownMenuCheckboxItem checked={dense} onCheckedChange={setDense}>Dense rows</DropdownMenuCheckboxItem>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`DropdownMenu`

Prop	Type	Default	Description
open	boolean	—	Controlled and uncontrolled open state.
defaultOpen	boolean	false	Controlled and uncontrolled open state.
onOpenChange	(open: boolean) => void	—	—
children	ReactNode	required	—

`DropdownMenuTrigger`

Extends ComponentProps<'button'>.

Prop	Type	Default	Description
asChild	boolean	false	—

`DropdownMenuContent`

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
side	Side	'bottom'	Same popper placement options as Popover.
align	Align	'start'	Same popper placement options as Popover.
offset	number	6	Same popper placement options as Popover.

`DropdownMenuItem`

Extends Omit<ComponentProps<'button'>, 'onSelect'>.

Prop	Type	Default	Description
onSelect	() => void	—	Fires on activation, before the menu closes.

`DropdownMenuCheckboxItem`

A menu item that carries state. Uses role="menuitemcheckbox".

Extends Omit<ComponentProps<'button'>, 'onChange'>.

Prop	Type	Default	Description
checked	boolean	false	—
onCheckedChange	(checked: boolean) => void	—	—

`DropdownMenuLabel`

Section heading, divider, and right-aligned key hint.

Extends ComponentProps<'div'>.

`DropdownMenuSeparator`

Section heading, divider, and right-aligned key hint.

Extends ComponentProps<'div'>.

`DropdownMenuShortcut`

Section heading, divider, and right-aligned key hint.

Extends ComponentProps<'span'>.