DropdownMenu
Menu de ações aberto por um botão. Itens com ícone e atalho, labels, separadores, submenus, itens de checkbox e radio, item destrutivo e itens desabilitados.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Básico
Submenu
Ícones e atalhos
Checkboxes
Radio
Checkboxes com ícones
Radio com ícones
Destrutivo
Com avatar
Completo
Grupos, ícones, atalhos, submenus, checkbox e radio juntos.
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@t2-educacao/midas";Uso
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Abrir</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Minha conta</DropdownMenuLabel>
<DropdownMenuGroup>
<DropdownMenuItem>Perfil</DropdownMenuItem>
<DropdownMenuItem>Assinatura</DropdownMenuItem>
<DropdownMenuItem>Configurações</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>Suporte</DropdownMenuItem>
<DropdownMenuItem disabled>API</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Componentes
| Componente | O que é |
|---|---|
DropdownMenu | Raiz |
DropdownMenuTrigger | Botão que abre o menu (use asChild) |
DropdownMenuContent | O menu (mínimo de 128px de largura) |
DropdownMenuItem | Ação. variant="destructive" para ações perigosas, inset para alinhar com itens que têm ícone |
DropdownMenuLabel | Título de uma seção (texto pequeno em cinza) |
DropdownMenuGroup | Agrupa itens relacionados |
DropdownMenuSeparator | Linha entre seções |
DropdownMenuShortcut | Atalho de teclado alinhado à direita |
DropdownMenuCheckboxItem | Item liga/desliga, com check à direita |
DropdownMenuRadioGroup / DropdownMenuRadioItem | Escolha única dentro do menu |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent | Submenu |
Props principais
| Componente | Prop | Descrição |
|---|---|---|
DropdownMenuContent | align ("start" padrão), side, sideOffset | Posição |
DropdownMenuItem | onSelect, disabled, variant, inset | Ação e estado |
DropdownMenuCheckboxItem | checked, onCheckedChange | Estado |
DropdownMenuRadioGroup | value, onValueChange | Valor escolhido |
Exemplos
Com ícones e atalhos
<DropdownMenuItem>
<User /> Perfil <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem variant="destructive">
<SignOut /> Sair <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>Submenu
<DropdownMenuSub>
<DropdownMenuSubTrigger>Convidar</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>E-mail</DropdownMenuItem>
<DropdownMenuItem>WhatsApp</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>Checkbox
const [barra, setBarra] = useState(true);
<DropdownMenuCheckboxItem checked={barra} onCheckedChange={setBarra}>
Barra de status
</DropdownMenuCheckboxItem>Radio
const [posicao, setPosicao] = useState("topo");
<DropdownMenuRadioGroup value={posicao} onValueChange={setPosicao}>
<DropdownMenuRadioItem value="topo">Topo</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="base">Base</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>Checkbox e radio com ícones
<DropdownMenuCheckboxItem checked={email} onCheckedChange={setEmail}>
<EnvelopeSimple /> E-mail
</DropdownMenuCheckboxItem>
<DropdownMenuRadioItem value="pix">
<PixLogo /> Pix
</DropdownMenuRadioItem>Com avatar
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" rounded aria-label="Conta">
<img src="/ana.jpg" alt="" className="size-8 rounded-full" />
</Button>
</DropdownMenuTrigger>Acessibilidade
- Teclado completo: setas navegam,
Enter/Espaçoselecionam,→abre submenu,Escfecha. - Digitar uma letra pula para o item que começa com ela.
- Gatilho só com ícone precisa de
aria-label.
Não faça
- Usar DropdownMenu para escolher um valor de formulário: use Combobox.
- Esconder a única forma de fazer uma ação importante dentro de um menu.
Dialog
Janela modal sobre a página para tarefas focadas (formulários curtos, confirmações, questionários). Dialog, DialogTrigger, DialogContent (com botão fechar), DialogHeader, DialogTitle, DialogDescription, DialogFooter e DialogClose.
Field
Estrutura de campo de formulário: Field, FieldLabel (com required e badge), FieldDescription, FieldError e FieldGroup. Orientação vertical ou horizontal, estados inválido e desabilitado.