Navegação
Menu hambúrguer
Hamburger menu
O botão de três linhas que revela a navegação quando falta espaço.
☰ Meu espaço
Início
Projetos
Configurações
Exemplo didático · Experimente os controles acima
Quando usar
Recolher a navegação em telas pequenas.
Cuidados e acessibilidade
Dê nome acessível ao botão e exponha o estado aberto ou fechado.
Partes e comportamento
Botão de abertura, estado expandido e lista de destinos que ele controla.
Não confunda
Três linhas costumam abrir navegação; três pontos costumam abrir ações adicionais.
Exemplo de código
<button aria-expanded="false" aria-controls="navegacao" id="menu">
Abrir navegação
</button>
<nav id="navegacao" hidden><a href="/">Início</a></nav>
<script>
const menu = document.querySelector("#menu");
const nav = document.querySelector("#navegacao");
menu.onclick = () => {
nav.hidden = !nav.hidden;
menu.setAttribute("aria-expanded", String(!nav.hidden));
};
</script>Trecho didático. Integre e teste no contexto do seu projeto.