Dropdown Menu

Menu contextual com opções, grupos e separadores. Construído sobre Radix UI Dropdown Menu.

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

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Abrir menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Editar</DropdownMenuItem>
    <DropdownMenuItem>Duplicar</DropdownMenuItem>
    <DropdownMenuItem variant="destructive">Excluir</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Default

Menu básico com ações.

Com grupos e shortcuts

Menu organizado em grupos com atalhos de teclado.

API Reference

Prop	Type	Default	Descrição
`DropdownMenuContent.align`	`'start' \| 'center' \| 'end'`	'center'	Alinhamento horizontal do menu em relação ao trigger
`DropdownMenuContent.side`	`'top' \| 'bottom' \| 'left' \| 'right'`	'bottom'	Lado em que o menu aparece
`DropdownMenuItem.variant`	`'default' \| 'destructive'`	'default'	Variante visual do item (destructive = vermelho)
`DropdownMenuShortcut`	`ReactNode`	—	Atalho de teclado exibido à direita do item
`DropdownMenuLabel`	`ReactNode`	—	Label de grupo (não clicável)
`DropdownMenuSeparator`	`-`	—	Linha divisória entre grupos de itens