Menus, abas e paginação: navegação que não perde o visitante

O custo de esconder a navegação

Esconder o menu custa uso, descoberta e velocidade, e o custo tem medição. O estudo do Nielsen Norman Group de 2016, com 179 participantes em seis sites, registrou: no desktop, as pessoas usaram o menu escondido em 27% dos casos, contra 48% com a navegação visível e 50% com a navegação combinada, em que parte dos itens fica exposta. No mesmo estudo do Nielsen Norman Group, a descoberta de conteúdo caiu mais de 20% com a navegação escondida e as tarefas no desktop ficaram pelo menos 39% mais lentas. No celular do mesmo teste a lentidão foi de 15%, e essa diferença sustenta a regra prática: o hambúrguer é tolerável no celular e um erro no desktop.

A consequência operacional é uma divisão de camadas. Ação de alta frequência mora na superfície, visível; o secundário desce para a gaveta. E antes de qualquer forma vem o rótulo: o Nielsen Norman Group chama de "aroma de informação" a propriedade de um link dizer, antes do clique, o que existe do outro lado. Trocar Saiba mais por Ver planos e preços é a melhoria mais barata de uma navegação, e o teste cabe numa frase: leia cada rótulo isolado do resto da tela e pergunte se dá para saber o que vem depois do clique.

Mega menu: o padrão dominante, com o defeito que 60% cometem (Baymard, 2023)

O mega menu aberto por hover é a navegação principal em 88% dos maiores e-commerces dos Estados Unidos, segundo o benchmark do Baymard Institute, e testes do Nielsen Norman Group desde 2009 confirmam que ele supera o dropdown comum, porque mostra tudo de uma vez em vez de pedir memória. O problema mora na implementação: o Baymard mediu em 2023 que 60% dos sites servem o hover sem atraso, e o painel abre e fecha sozinho quando o cursor cruza a barra, fechando na cara de quem move o mouse em diagonal para alcançar uma subcategoria. O instituto documenta o contraste com dois casos: na Dell, categorias vizinhas disparavam no caminho do cursor; na Staples, o atraso segura o painel certo aberto.

A correção custa uma configuração: atraso de 300 a 500 milissegundos antes de abrir e antes de fechar, faixa que, segundo o Baymard em 2023, elimina a maioria dos disparos acidentais. No celular, o mega menu vira acordeão ou gaveta em vez de replicar o grid de colunas. E o tamanho da oportunidade aparece no benchmark 2025 do mesmo instituto, com mais de 16.000 avaliações: 58% dos sites desktop e 67% dos mobile têm navegação de home e categoria classificada de medíocre a ruim. Navegação bem executada é minoria mensurada, e por isso é vantagem competitiva de quem a trata como projeto.

Os quatro sentidos de "menu", e o erro que a IA repete

O erro mais caro em acessibilidade de navegação é usar o papel ARIA de menu em navegação de site. O exemplo oficial de navegação do W3C, no guia de práticas WAI-ARIA, declara que a própria implementação dispensa esse papel: navegação típica de site fica sem as interações de teclado que as tecnologias assistivas esperam de um widget com o papel de menu, então o padrão certo é o de área que abre e fecha (disclosure), com <nav> e links. O papel de menu fica reservado ao menu de ação, com comandos como editar, duplicar e excluir, que imita os menus do sistema operacional e responde ao teclado completo: setas circulando entre os itens, Home e End, uma letra pulando para o item, Enter acionando e Esc fechando com o foco de volta no gatilho.

Esse é também o erro mais frequente em código gerado por inteligência artificial: o modelo lê a palavra "menu" e aplica o papel de aplicativo. A correção entra no próprio pedido ao agente, numa frase: a navegação primária usa <nav> e links, sem papel de menu. Nas primitivas, o shadcn/ui separa os dois propósitos em componentes distintos, NavigationMenu para links e DropdownMenu para ações, e desde julho de 2026 abre projetos novos sobre o Base UI, mantido pela equipe do MUI e estável desde 11 de dezembro de 2025. Do lado nativo, o atributo popover entrega abertura, fechamento, Esc e clique fora sem JavaScript, com uma ressalva: ele define papel nenhum, então o menu de ação continua precisando do papel declarado ou de uma primitiva por baixo.

Alvos de toque: cada número com o dono certo

Números de alvo de toque circulam misturados, e a mistura reprova auditoria. A tabela separa o que é norma exigível do que é recomendação de plataforma, com a fonte de cada linha.

Fontes verificadas nos textos normativos e nas documentações oficiais em 18/08/2026. A formulação "a Apple exige 44 como mínimo" caiu na verificação: 44 é o padrão recomendado dela, e o mínimo listado é 28.

Abas: visões paralelas, com o critério de decisão

Abas alternam visões paralelas do mesmo recurso e ficam fora da navegação de topo do site. O Nielsen Norman Group, em revisão de 2024 do artigo clássico sobre abas, dá o critério que decide: quando a pessoa precisa comparar informação entre painéis, a troca repetida de aba cobra memória de curto prazo e aumenta o custo de interação, e uma página única vence. Quanto menos abas, melhor; o conteúdo das abas não padrão é suplementar, nunca crítico; e quando o conteúdo não forma grupos nítidos, aba é o controle errado.

O teclado vem do guia de práticas do W3C: as setas circulam entre as abas, e a ativação automática ao focar só é recomendada quando o painel aparece sem latência perceptível, o que na prática exige conteúdo pré-carregado. Painel que carrega da rede pede ativação manual, com Enter ou Espaço. A aba selecionada se marca para o leitor de tela, com o indicador visual somando mais de um sinal além da cor. Dois usos dos estudos de caso do curso: na documentação da Stripe, as abas de linguagem do painel de código são um grupo de abas de verdade, com troca pelas setas; na Booking e na LATAM, a caixa de busca da home pede a intenção primeiro em abas de produto, e cada aba herda os dados de viagem já digitados.

Paginar, carregar mais ou rolagem infinita: a decisão com dono

Para lista de produtos, o teste de usabilidade do Baymard Institute concluiu que o botão de carregar mais, combinado com carregamento preguiçoso, é a implementação superior, e a atualização de pesquisa de 2024 do instituto, com mais de 5.550 horas de teste, manteve a preferência. As faixas de quantidade medidas em 2020: o desktop carrega de 100 a 150 itens para produto visual e de 50 a 100 para produto de especificação; o celular, de 15 a 30; e 52% dos sites erram essa quantidade.

O Nielsen Norman Group, em artigo de 2022, delimita o território da rolagem infinita: fluxo de itens homogêneos consumido sem tarefa específica, como um feed social. Fora desse território, a rolagem infinita clássica cobra três vezes: o rodapé fica inalcançável, o SEO sofre e a acessibilidade quebra.

A falha que mais irrita tem número e mecanismo. Em 2020 o Baymard mediu que 13% dos grandes e-commerces devolvem o visitante ao topo da lista quando ele volta da página de produto, e o visitante desiste de refazer a rolagem. O controle disso é a History API do navegador, com scrollRestoration, e a condição real: em lista carregada dinamicamente, restaurar a posição só funciona se o aplicativo repovoar os itens antes de restaurar. Os prompts de lista longa no fim da página cobrem o caso.

O que o Google exige por baixo

A documentação vigente do Google Search Central aposentou o rel=next/prev ("o Google não usa mais essas tags") e explica o risco da rolagem infinita para descoberta: os rastreadores do Google clicam botão nenhum e em geral disparam função nenhuma de JavaScript. De uma coleção indexável, ela pede três coisas:

• Links de âncora reais (<a href>) entre as páginas da coleção.
• Uma URL única por página, com a numeração fora do fragmento #, que o Google ignora.
• Canonical próprio de cada página, nunca tudo apontando para a página 1.

A saída é manter URLs paginadas por baixo da experiência de rolagem. Em 2026 isso vale dobrado, porque agentes de IA também leem sites: a Cloudflare mediu em junho de 2025 a plataforma Claude fazendo cerca de 71.000 requisições de página para cada visita referida, e conteúdo que só existe atrás de um clique fica fora dessa leitura.

Acessibilidade e a régua legal

O padrão oficial do W3C para rolagem infinita acessível é o Feed Pattern do guia de práticas: Page Down e Page Up movem o foco entre os artigos, e Ctrl+End e Ctrl+Home saltam para depois e antes do feed, que é como o usuário de leitor de tela escapa da lista. Nada disso vem de graça: exige gestão de foco e atributos de posição.

A régua legal fecha a conta. O European Accessibility Act se aplica desde 28 de junho de 2025 e alcança nominalmente o comércio eletrônico; o artigo 63 da Lei 13.146/2015 obriga acessibilidade nos sites de empresas com sede ou representação no Brasil; e em julho de 2026 a Justiça Federal deu à União 180 dias para apresentar o plano de acessibilidade dos sites federais, sob multa diária de R$ 10 mil.

O que a plataforma web já entrega, com data

Recurso de navegação nativo se adota pelo status Baseline conferido no dia, com o estado final funcionando sem o recurso. O retrato de 18/08/2026, pelo webstatus.dev:

Status lidos na API oficial do webstatus.dev e nas release notes de Mozilla e Google em 18/08/2026. Baseline é retrato datado: confira no dia em que for escrever o código.

O resumo em uma peça

O infográfico condensa os números da aula para colar no mural do time ou mandar no grupo: o uso do menu visível contra o escondido, o atraso do mega menu, o papel certo de cada menu, os alvos de toque e a decisão de lista longa. Gerado no NotebookLM a partir do dossiê de pesquisa desta página.

Prompts prontos

Menu suspenso operável por teclado (do curso)

Torne este menu suspenso totalmente operável por teclado:
- Enter/Espaço no gatilho abre; Esc fecha e devolve o foco ao botão gatilho.
- O botão expõe aria-expanded e aria-haspopup.
- A navegação primária do site usa <nav> e links, SEM role="menu";
  role="menu" só no menu de ações.
- Respeite prefers-reduced-motion na animação de abertura.
- Foco visível em todos os itens (:focus-visible, anel de 2px).
Mostre o TSX.

Gaveta que fecha no botão voltar do aparelho (do curso)

Implemente uma gaveta de filtros para celular com o botão voltar do
aparelho significando "fechar o painel", em três movimentos:
1. Ao abrir, registre uma parada no histórico
   (window.history.pushState({ gaveta: true }, "")).
2. Escute o evento popstate e use-o apenas para fechar a gaveta,
   nunca para navegar.
3. Se a gaveta fechar pelo X ou pelo Esc, desfaça a parada
   (window.history.back() se o estado atual for da gaveta);
   sem esta limpeza sobra um "voltar" morto no histórico.
Complete com: foco preso no painel, Esc fecha, clique fora fecha,
foco devolvido ao gatilho, e a lista interna com
overflow-y: auto e overscroll-behavior: contain.

Lista longa que o Google e o leitor de tela enxergam

Implemente a lista de itens com botão "Carregar mais" e lazy-load,
com estas garantias:
- URLs paginadas reais por baixo (History API): cada lote avança
  ?pagina=N, com link <a href> para a próxima página presente no HTML
  e canonical próprio por página (nunca tudo para a página 1).
- Ao voltar da página de detalhe, o visitante retorna à MESMA posição:
  repovoe os itens carregados antes de restaurar o scroll
  (history.scrollRestoration).
- Acessibilidade: siga o Feed Pattern do W3C APG (Page Down/Page Up
  entre itens; Ctrl+End/Ctrl+Home saltam o feed); o rodapé permanece
  alcançável; o foco nunca fica preso na lista.
- Estado de filtro e página na URL com nuqs, nunca em useState solto.
Critério de aceite: com JavaScript desligado, a página 2 existe e tem
conteúdo; com leitor de tela, dá para sair da lista.