Gerador de menu responsivo

Gerador de menu responsivo: para que serve

Todo site precisa de um menu que funcione no computador e no celular. Este gerador monta o menu de navegação com os seus links: lado a lado nas telas grandes e com botão hambúrguer abaixo do ponto de quebra que você escolher.

O código segue as boas práticas de acessibilidade: elemento nav com rótulo, botão com aria-expanded e aria-controls, fechamento com a tecla Esc e ao tocar num link, e animação do ícone respeitando a preferência por menos movimento. A prévia mostra o resultado em tamanho de computador e de celular ao mesmo tempo.

Como usar

1. Escreva o nome do site e os links.
2. Escolha as cores, o ponto de quebra e se o último link vira botão.
3. Copie o HTML, o CSS e o JavaScript ou baixe a página de exemplo.

Quando usar

• Site institucional feito à mão.
• Landing page sem framework.
• Trocar um menu antigo que não funciona no celular.

Perguntas frequentes

O menu é acessível?

Sim. O botão é um elemento button com aria-expanded e aria-controls, o menu fecha com a tecla Esc e ao clicar num link, e a navegação fica dentro de um elemento nav com aria-label. Funciona com teclado e leitor de tela.

Funciona sem JavaScript?

No computador, sim: os links aparecem sempre. No celular o botão precisa do JavaScript para abrir; por isso o código só esconde os links quando o script carrega (classe js no html), e sem script eles aparecem empilhados.

Qual ponto de quebra usar?

Até uns cinco links curtos, 768 px funciona bem. Com mais links ou nomes compridos, suba para 960 ou 1024 px para os itens não se espremerem antes de virar hambúrguer.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas