Dropdown (menu suspenso)

Componente que esconde opções até a pessoa abrir, economizando espaço na tela.

Hard

O que é

Dropdown é um dos componentes mais comuns que existem, porque mostra várias opções sem ocupar a tela toda, revelando a lista só quando você aciona. É o que você usa pra escolher um país num formulário, filtrar produtos numa loja ou trocar o período num painel.

O cuidado maior aparece com lista longa, principalmente no celular, onde rolar dezenas de opções cansa. É aí que entra o autocomplete dentro do dropdown, que vai filtrando conforme a pessoa digita e reduz erro. E tem ainda o lado da acessibilidade, já que um dropdown mal codificado confunde o leitor de tela. Atributos ARIA e navegação por teclado são o que resolvem isso.

Em uma frase

Com tantos países nessa lista, melhor um dropdown com busca do que vinte radio buttons empilhados.

A pergunta que ele responde

Quando uso menu suspenso e quando deixo as opções todas à mostra?

Quando usar

Ajuda quando há muitas opções e a tela está apertada, e quando a escolha não precisa estar toda visível logo de cara.

Como não usar

O cuidado é esconder dentro do dropdown uma opção que precisava estar à mostra, ou empilhar uma lista gigante sem busca. Nos dois casos, você troca espaço por esforço de quem usa.

Na prática

Pense num checkout em que o campo de país é um dropdown com busca. A pessoa digita 'Bra' e já chega em Brasil, sem precisar rolar a lista inteira até a letra B.

Não confunda com

Vale separar dropdown de um grupo de radio buttons. O dropdown esconde as opções e economiza espaço, enquanto o radio mostra tudo de uma vez. Quando há poucas opções, o radio costuma ser melhor justamente porque deixa a escolha à vista.

D

Em inglês

Dropdowns

Pronúncia

dróp-daun

Também chamado de

dropdown, menu suspenso, lista suspensa, combobox

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre dropdowns e seleção