Menu de navegação: 6 tipos e quando usar cada um

O menu é o mapa do seu site. Se a pessoa não encontra o que quer em poucos segundos, ela vai embora. Existem vários formatos, e a escolha certa depende de quantas páginas você tem e do que quer comunicar. Veja seis modelos, com prós e contras.

1. Menu simples em linha

O clássico: logo à esquerda, links no centro ou à direita e um botão de ação. É o mais fácil de entender e funciona para a maioria dos sites.

Use quando: você tem até cinco ou seis páginas principais. Dica: destaque o botão de ação (contato, comprar) e evite mais de seis links.

2. Menu em cápsula flutuante

Uma barra arredondada que flutua sobre o conteúdo, com um indicador que desliza até o item sob o mouse. Dá um ar moderno e leve, sem ocupar a largura inteira. O Menu Cápsula mostra o efeito.

Use quando: é uma landing page ou um site de produto com poucas seções. Cuidado: certifique-se de que o texto continua legível sobre qualquer fundo que passe por trás.

3. Megamenu

Um painel largo, com várias colunas de links, que abre ao passar o mouse ou clicar. O Megamenu em Colunas organiza muito conteúdo num só lugar.

Use quando: a loja ou o portal tem muitas categorias e subcategorias. Cuidado: em sites pequenos é exagero. E no celular ele deve virar uma lista simples.

4. Menu hambúrguer

O ícone de três linhas que esconde os links e abre uma lista ou uma tela inteira. É o padrão no celular, e o Hambúrguer Animado faz a transição virar um pequeno prazer.

Use quando: a tela é pequena, ou o site quer um topo limpo. Cuidado: em computadores, esconder todos os links reduz a descoberta. Deixe os principais à vista.

5. Dock de ícones

Uma barra de ícones, como a de alguns sistemas operacionais, em que o ícone sob o cursor cresce. O Dock Magnético funciona bem para portfólios e sites criativos.

Use quando: os ícones são universais e claros (início, projetos, contato). Cuidado: sem rótulos, as pessoas podem não entender cada ícone.

6. Menu lateral recolhível

Uma coluna à esquerda com os itens, que pode se recolher para ganhar espaço. O Menu Lateral Recolhível é típico de painéis e aplicativos.

Use quando: há muitas áreas e a pessoa navega o tempo todo, como num painel de controle. Cuidado: em sites de divulgação, ele rouba espaço do conteúdo.

Regras que valem para todos

• Poucos itens. Entre cinco e sete é o ideal. Mais que isso, agrupe.
• Nomes claros. "Planos" é melhor que "Soluções inovadoras".
• Indique a página atual com um destaque visível.
• Botão de ação diferente dos links, como "Falar conosco".
• Mesmo menu em todas as páginas, na mesma posição.
• Fácil de tocar. Áreas de pelo menos 44 pixels no celular.

Menu fixo ou não

Um cabeçalho que acompanha a rolagem ajuda a navegar, mas ocupa espaço. Se fixar, deixe-o fino e, de preferência, que se esconda ao descer e volte ao subir. Em páginas longas, vale muito a pena.

Acessibilidade

• Navegação por teclado: todos os itens devem ser alcançáveis com Tab.
• Foco visível nos links.
• Botão do menu com rótulo para leitores de tela.
• Menus que abrem ao passar o mouse também precisam abrir por clique e por teclado, porque no celular não existe hover.

Como pedir para a IA

Crie um cabeçalho flutuante em formato de cápsula, centralizado, com os links
Início, Recursos, Planos e Contato, e um botão "Começar" à direita.
Um indicador desliza até o link sob o mouse. No celular, vira um ícone de
hambúrguer que abre um menu em tela cheia.

Em resumo

Escolha o menu pelo tamanho do site: simples ou cápsula para poucos itens, megamenu para muitos, hambúrguer no celular. Veja todas as opções na categoria de cabeçalhos e menus.