DropdownMenu

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Dropdown Menu Item

variant

dsState

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Default	Focus	Disabled
Minha conta	Minha conta	Minha conta

Default	Focus	Disabled
Sair	Sair	Sair

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

DropdownMenuContentProps

Prop	Tipo	Padrão
size?	"lg" \| "md" \| "sm" \| null	"md"
side?	"bottom" \| "left" \| "right" \| "top"	"bottom"
align?	"center" \| "end" \| "start"	"start"
sideOffset?	number	4
className?	string	—
children?	ReactNode	—

DropdownMenuPreviewProps

Prop	Tipo	Padrão	Descrição
size?	"lg" \| "md" \| "sm" \| null	"md"
bare?	boolean	false	Provide the menu context only, with no panel around the children (to show one item on its own).
className?	string	—

DropdownMenuItemProps

Prop	Tipo	Padrão	Descrição
variant?	"default" \| "destructive" \| null	"default"
icon?	ReactNode	—	The Figma "Show icon" + "Icon" pair: a lucide element before the label.
shortcut?	string	—	The Figma "shortcut" text, e.g. "⌘K" (visual hint only).
chevron?	boolean	false	The Figma "showChevron": the item leads somewhere else.
disabled?	boolean	false	Whether the component should ignore user interaction.
className?	string	—
children?	ReactNode	—

DropdownMenuCheckboxItemProps

Prop	Tipo	Padrão	Descrição
disabled?	boolean	false	Whether the component should ignore user interaction.
className?	string	—
children?	ReactNode	—