DropdownMenu

Colors/surface/overlay with 8px corners and padding. 40px rows with 20px icons; the destructive item uses Colors/status/error.

Figma: 10 / Components / DropdownMenu

Usage

Source: src/components/ui/dropdown-menu.tsx

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

<DropdownMenu>
    <DropdownMenuTrigger render={<Button variant='outline' />}>Actions</DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuItem><Pencil /> Edit</DropdownMenuItem>
        <DropdownMenuItem variant='destructive'><Trash2 /> Delete</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

When to use

When to reach for it, and when to use something else.

Use it for

Row actions in tables.

Choosing visible columns or filters with checkbox items.

Avoid

Navigation between pages; use the sidebar.

A single action; use a Button.

API reference

DropdownMenuContent

Prop	Type	Default	Description
side	'top' \| 'bottom' \| 'left' \| 'right'	'bottom'	Where the menu opens.
align	'start' \| 'center' \| 'end'	'start'	Alignment to the trigger.

DropdownMenuItem

Prop	Type	Default	Description
variant	'default' \| 'destructive'	'default'	destructive for removing.
onClick	() => void	–	Runs the action; the menu closes.

PreviousDialog NextField