C19 · Componentes

Dropdown Menu

Lista de ações ou opções acionada por trigger. Mesma disciplina visual de elevação (E2) e tipografia. Itens organizados em grupos lógicos com separadores.

01

Estrutura

<button aria-haspopup="menu" aria-expanded="false">
  Ações ▾
</button>
<ul role="menu" hidden>
  <li role="menuitem">Editar</li>
  <li role="menuitem">Duplicar</li>
  <li role="separator"></li>
  <li role="menuitem" class="danger">Excluir</li>
</ul>
02

Diretrizes

  • Agrupe ações por intenção: edição → duplicação → exclusão (separadas).
  • Ações destrutivas no fim, em vermelho semântico.
  • Setas ↑/↓ navegam itens; Enter/Espaço executa.
  • Ícones à esquerda do label esclarecem a ação.
  • Limite a 8 itens — mais que isso, repense a navegação.