DropdownMenu

Lista de ações ou opções aberta por um botão.

Playground

Lado

Item destrutivo

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Opções</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Projeto</DropdownMenuLabel>
      <DropdownMenuItem>Renomear<DropdownMenuShortcut>⌘R</DropdownMenuShortcut></DropdownMenuItem>
      <DropdownMenuItem>Duplicar</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Excluir</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Quando usar

✓Ações secundárias de um item (menu '…')
✓Trocar uma opção entre poucas, com rótulo curto

Evite quando

Clique direito→ ContextMenu
Escolher valor de formulário→ Select
A ação principal da tela→ Button visível — não esconda no menu

Variantes e props

variant (Item)padrão: default

defaultdestructive

inset (Item/Label)

alinha com itens que têm ícone

Estados

openitem highlighteditem disabledchecked

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: menu / menuitem
Teclado: setas navegam; Enter aciona; Esc fecha; digitar busca item

Código

Partes: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuPortal

import

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

Fonte: src/components/ui/dropdown-menu.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: ContextMenu, Popover, Select