Menus e navegação: a arquitetura que faz o visitante encontrar (e comprar)

A maioria das discussões sobre "redesenhar o site" começa pelo logótipo e pelas cores. Quase nenhuma começa pelo menu. Mal, o menu é a única coisa que toda a gente que cai no teu site usa, em todas as páginas, a toda a hora. Cores escolhem-se uma vez. O menu é interrogado milhares de vezes por mês: "onde vejo preços?", "como peço orçamento?", "isto serve para mim?". Cada clique que falha é tráfego que pagaste para ir embora.

Este guia mostra como decidir a navegação do site da tua PME em Portugal, quando precisas de mega menu, quando um simples chega, o que muda no telemóvel, e que pequenos detalhes (breadcrumbs, sticky, ordem) movem a agulha da conversão sem mexer no resto.

A regra de ouro: 7 itens, no máximo

Se o teu menu principal tem 12 itens, o teu site não tem foco, tens medo de não mostrar alguma coisa. Resultado prático: o visitante não escolhe nada.

Limites a respeitar:

1. Menu principal: 5 a 7 itens. Acima disso, o olho parte ao meio e ninguém lê.
2. Cada item: 1 a 2 palavras. "Serviços", "Preços", "Sobre" batem "Os nossos serviços de consultoria".
3. CTA primário: botão destacado, separado dos itens normais (ex.: "Pedir orçamento" a cor de marca).

A regra simples: se hesitas em cortar um item, ele vai para o rodapé ou para uma página de sumário. Não para o menu principal.

Mega menu vs menu simples: como decidir

Não é gosto, é matemática. Olha para o número de páginas e a sua hierarquia.

• Menu simples (links diretos): site com até ~15 páginas. PME de serviços, advogados, consultores, clínicas pequenas. Tudo cabe em 5-7 entradas.
• Menu dropdown (1 nível): 15 a 40 páginas, agrupáveis em 3-5 categorias. Sites de prestadores com várias especialidades (uma clínica com 6 áreas).
• Mega menu (painel com colunas): 40+ páginas e múltiplas dimensões (por serviço, por sector, por país). Lojas online médias, agências com matriz de serviços, sites multilingue extensos.

Erro clássico: pôr mega menu num site de 8 páginas porque "fica profissional". Fica pesado e diz ao Google que tens muita coisa importante quando, na verdade, tens pouca, o sinal de relevância dilui-se.

Se vendes na mesma loja por categoria de produto e por marca, podes precisar de mega menu na loja online, ver estrutura de categorias e filtros.

A ordem dos itens importa (mais do que pensas)

A ordem do menu funciona como a ordem de uma frase. O olho cai no primeiro e no último com mais atenção do que no meio. Padrão que funciona em PT para PME:

1. Início (ou logótipo a fazer de "Início", preferível, poupa um slot)
2. O que fazemos ("Serviços" ou nomes dos 2-3 serviços)
3. Como trabalhamos ("Processo" / "Como funciona")
4. Preços (se mostras, ver a seguir)
5. Sobre ou Blog
6. Contacto ou CTA primário destacado

O CTA fica sempre à direita, separado visualmente. É a única coisa que queres que o utilizador clique se já estiver pronto. Se metes "Pedir orçamento" como item normal, perde-se no meio.

Mostrar preços no menu: sim ou não?

Tema controverso. A resposta honesta: mostra um item "Preços" ou "Como cobramos" sempre que tiveres âncoras reais para mostrar. Esconder preços é a posição maioritária do mercado PT, exatamente por isso é diferenciação.

Quando faz sentido um item dedicado:

• Tens preços fixos ou bandas claras (ex.: landing 400€, sites desde 1.500€, lojas desde 3.500€).
• O ICP procura "quanto custa X em Portugal", confirma no Search Console.
• Vendes contra concorrentes que escondem o preço.

Quando não:

• Cada projeto é genuinamente custom (consultoria sénior, arquitetura).
• Bandas de preço são tão largas que confundem mais do que esclarecem.

Mesmo nesse caso, podes ter "Como cobramos" a explicar o método. Esconder tudo é desconfiança gratuita.

Navegação mobile: o esconder bem feito

Mais de 70% do tráfego de PME em PT vem de telemóvel. O menu hamburger (☰) é a norma, mas a forma como abre faz a diferença entre conversão e abandono.

Boas práticas que valem mais do que parecem:

• Hamburger no canto superior direito, com label "Menu" visível ao lado em ecrãs maiores. Ícone solto é ambíguo para utilizadores 45+.
• CTA primário sempre visível no header, mesmo com menu fechado (botão pequeno tipo "Orçamento" ou ícone de telefone para prestadores de serviço).
• Menu abre como overlay full-screen, não como pequeno dropdown. Toques mais largos, leitura mais clara.
• Sub-menus expandem in-place (acordeão), não navegam para outra tela.
• Botão de fecho (X) óbvio, na mesma posição do hamburger.

Detalhe que muita gente esquece: o número de telefone, se serviço presencial, deve aparecer no header em telemóvel como ícone clicável, chamada direta com um toque. Para um canalizador ou eletricista, isso é o site inteiro.

Sticky header: quando ajuda, quando estorva

Header que fica fixo ao fazer scroll. Útil em sites longos (homepage com 8 secções, posts de blog), porque mantém o CTA acessível sem o utilizador ter de voltar ao topo.

Quando usar:

• Páginas com >3 ecrãs de altura.
• CTA primário no header (orçamento, contacto).
• Sites de e-commerce (carrinho sempre visível).

Quando não usar:

• Páginas curtas (landing single-screen).
• Headers muito altos (ocupam 15% do ecrã móvel, desperdício).

Regra: sticky encolhe ao fazer scroll (de 80px para 56px, por exemplo). Mantém o logótipo e o CTA. Esconde itens secundários se preciso.

Breadcrumbs: pequenos, mas fazem três coisas ao mesmo tempo

Os breadcrumbs ("Início > Blog > SEO > Este post") são um dos elementos mais subestimados do site. Em sites com mais de uma camada de profundidade, fazem três coisas em simultâneo:

1. Mostram ao utilizador onde está, reduz ansiedade, especialmente em catálogos grandes.
2. Reduzem a bounce rate, porque oferecem caminho lateral sem voltar ao menu.
3. Ajudam o Google, via dados estruturados BreadcrumbList, aparecem no SERP a substituir o URL, mais clicks.

Onde pôr:

• Imediatamente abaixo do header, alinhados à esquerda.
• Texto pequeno, mas legível (14-15px).
• Último item (página atual) sem link, em texto neutro.

Não uses breadcrumbs em sites de uma página ou em homepages, não há "onde" para mostrar. Para perceber a hierarquia que os justifica, vê o que devias mapear antes em estrutura de site institucional: páginas essenciais.

Rodapé: o segundo menu (e às vezes o mais útil)

O rodapé é onde acaba quem chegou ao fundo da página sem encontrar o que queria. Tratar isso como zona perdida é desperdício. O que deve estar lá:

• Replicação do menu principal (texto pequeno).
• Páginas legais: Política de Privacidade e Termos, Política de Cookies, Livro de Reclamações Eletrónico (loja).
• Contactos diretos: email real, telefone, morada (mesmo que sem rua, "Portugal · NIF X").
• NIF/NIPC, sinal de seriedade fiscal em PT.
• Links a guias relevantes (sitemap simplificado, "Os 3 posts mais lidos").

O rodapé é o lugar certo para itens que não cabem no menu mas que utilizadores avançados procuram: livro de reclamações, RGPD, sitemap, GitHub se aplicável.

Erros de navegação que matam conversão

Os 7 mais comuns que vejo em sites de PME PT:

1. Logótipo que não leva à homepage, convenção web universal. Quebra-la é fricção gratuita.
2. "Saiba mais" como CTA principal, verbo formal e vago. Trocar por verbo específico ("Pedir orçamento", "Ver preços").
3. Item "Home" quando o logótipo já faz isso, desperdício de slot.
4. CTA igual aos outros itens, sem destaque visual, ninguém clica.
5. Menu mobile sem CTA visível, utilizador tem de abrir hamburger para chegar ao botão. Perda direta.
6. Sub-menus com 10+ itens, pior que menu principal grande. Divide ou repensa categorias.
7. Links externos no menu principal (ex.: Instagram), manda o tráfego embora. Esses vão para o rodapé.

Testar antes de mudar (e como)

Não mudes o menu por intuição. Testa.

Métodos baratos:

• Treejack / card sorting com 5 pessoas do teu ICP, pede que organizem 30 cartões com nomes de páginas em grupos. Vê onde colidem com a tua estrutura.
• Teste de 5 segundos, mostra o homepage a alguém durante 5s, depois pergunta: "o que vendem? a quem? onde clicarias primeiro?". Se não acerta, o menu (ou o hero) falhou.
• Search Console + GA4, vê que queries trazem tráfego. Se "preços X" tem volume e não tens item "Preços", pintaste-te ao canto.
• Heatmaps e gravações de sessão, Hotjar, Microsoft Clarity (grátis). Vês exatamente onde os utilizadores clicam (e onde clicam em coisas que não são links, sinal de copy enganadora).

Mexe um elemento de cada vez. Mede 2 semanas. Decide com dados.

Em resumo

• Menu principal: 5-7 itens, 1-2 palavras cada, CTA separado à direita.
• Mega menu só com 40+ páginas reais, caso contrário, dilui sinais.
• Mostra "Preços" sempre que tenhas âncoras concretas, diferenciação no mercado PT.
• Mobile: hamburger overlay, CTA sempre visível, telefone clicável.
• Sticky header só em páginas longas, e que encolhe ao fazer scroll.
• Breadcrumbs com schema em qualquer estrutura com >1 nível.
• Rodapé como segundo menu, legais, NIF, contactos, sitemap.
• Testa com 5 pessoas reais antes de mexer.

---

No sitesfixe.pt desenhamos sites e lojas online com navegação pensada para conversão, menu, mobile, breadcrumbs e CTA bem postos desde o briefing. Sites desde 1.500€, lojas desde 3.500€. Pedir orçamento.

Lê também:

• Estrutura de site institucional: as páginas que não podem faltar
• Mobile-first: porque o teu site se desenha do telemóvel para fora
• URLs amigáveis e SEO: como nomear páginas que o Google entende

Fontes

• Google Search Central, Links rastreáveis
• web.dev, Navegação
• Google Search Central, Breadcrumb structured data