Padrões de menus suspensos e popovers

A API de popover do HTML (Chrome 114+, amplamente compatível) oferece um comportamento declarativo de exibição e ocultação: o atributo popover no alvo e popovertarget no botão acionador. Nenhum JavaScript é necessário para a abertura e o fechamento básicos, incluindo o fechamento ao clicar fora e o tratamento da tecla Escape.

Selecione os elementos popover com [popover] ou :popover-open. O pseudo-elemento ::backdrop está disponível para escurecer o plano de fundo. Os elementos popover são renderizados na camada superior, como os diálogos — sem problemas de empilhamento causados por z-index.

O posicionamento por âncora do CSS (Chrome 125+) posiciona um elemento popover em relação ao seu acionador sem JavaScript: anchor-name: --btn no acionador, position-anchor: --btn no elemento popover e, em seguida, top: anchor(bottom); left: anchor(left) para alinhá-lo abaixo do acionador.

Sem o posicionamento por âncora, use um elemento contêiner pai posicionado: position: relative no contêiner e position: absolute; top: 100%; left: 0 no menu suspenso. Isso funciona em diferentes navegadores, mas exige que o acionador e o menu suspenso sejam elementos irmãos dentro de um contêiner posicionado.

Estilize a lista do menu como position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Os itens do menu usam preenchimento, plano de fundo ao passar o cursor e exibição em largura total.

Anime a abertura e o fechamento do elemento popover usando @starting-style para a entrada e transition-behavior: allow-discrete para animar a alteração da propriedade display. Isso permite criar animações de entrada e saída somente com CSS, vinculadas ao estado aberto ou fechado do elemento popover.

Os menus suspensos precisam oferecer suporte ao teclado: as teclas de seta navegam pelos itens do menu, Enter/Espaço ativam o item em foco, e Escape fecha o menu e devolve o foco ao acionador. A API de popover trata Escape automaticamente; a navegação pelas teclas de seta exige o tratamento de eventos em JavaScript.

Menu suspenso personalizado (sem usar a API de popover): adicione aria-haspopup="listbox" e aria-expanded ao acionador, role="listbox" à lista e role="option" e aria-selected a cada item. Os leitores de tela anunciam o estado expandido e a quantidade de itens.

Um menu suspenso posicionado abaixo do acionador pode transbordar pela parte inferior da janela de visualização. Detecte isso com IntersectionObserver ou getBoundingClientRect e inverta o menu para que fique acima do acionador. O posicionamento por âncora do CSS lida com isso usando position-try-fallbacks.

Menus suspensos aninhados (submenus) adicionam complexidade. Posicione os submenus à direita dos itens pai. Adicione um atraso antes de ocultá-los ao mover o mouse para fora (usando transition-delay do CSS ou um tempo limite do JS) para impedir que os submenus sejam fechados durante movimentos diagonais do mouse.

Menus suspensos acionados ao passar o cursor não funcionam em dispositivos sensíveis ao toque — não existe estado de passar o cursor. Use acionadores de clique ou toque universalmente. Fechar ao tocar fora funciona por meio do fechamento ao clicar fora da API de popover ou de um ouvinte de cliques no documento que feche os menus suspensos abertos.

O que a API de popover fornece automaticamente e que antes exigia JavaScript personalizado?

A API de popover e o posicionamento por âncora do CSS permitem criar, em conjunto, padrões declarativos de menus suspensos e elementos sobrepostos com uso mínimo de JavaScript. Para obter suporte mais amplo nos navegadores, os padrões com contêineres posicionados funcionam de forma confiável. Acessibilidade do teclado, atributos ARIA, tratamento de colisões com a janela de visualização e suporte a dispositivos sensíveis ao toque completam componentes de menus suspensos prontos para produção.