Visão geral

O DropdownMenu exibe uma lista de opções ao clicar no trigger. É diferente do Context Menu pois requer clique explícito.

Demo básica

Import

import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

Com checkboxes e radio

O DropdownMenu também suporta items de seleção com estado.

Padrão de implementação

Snippets para os usos mais comuns do Dropdown Menu.

Menu de usuário

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon">
      <Avatar>
        <AvatarImage src="/avatar.jpg" alt="User" />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end" className="w-48">
    <DropdownMenuLabel>Ana Beatriz</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Perfil</DropdownMenuItem>
    <DropdownMenuItem>Configurações</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive focus:text-destructive">
      Sair
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Menu de ações por linha

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button size="icon-sm" variant="ghost" aria-label="Ações">
      <MoreHorizontalIcon />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Editar</DropdownMenuItem>
    <DropdownMenuItem>Duplicar</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive focus:text-destructive">
      Excluir
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props e uso

API dos sub-componentes do DropdownMenu.

Sub-componentes

DropdownMenuContent

align, side, sideOffset, className

Painel flutuante. Use align='end' para alinhar à direita do trigger.

DropdownMenuItem

disabled, onSelect, className

Item clicável. Use className='text-destructive' para ações perigosas.

DropdownMenuCheckboxItem

checked, onCheckedChange

Item com estado checked.

DropdownMenuRadioGroup

value, onValueChange

Container para radio items de seleção única.

DropdownMenuSub

—

Container para submenu aninhado.

Acessibilidade

O menu usa role="menu" com navegação por teclado completa (setas, Enter, Escape).

O trigger recebe aria-haspopup="menu" e aria-expanded automaticamente.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter