Pagination
Resumo
A paginação divide grandes conjuntos de dados em várias páginas para facilitar o consumo.
Reduz a carga cognitiva, já que limite o número de itens visíveis na página para o usuário final
Fácil de navegar: As páginas oferecem marcos para as pessoas se orientarem
Define expectativas: Usuários sabem exatamente o quão grande é o conjunto de dados
Oferece controle ao usuário: Usuários podem controlar quantas páginas desejam ver
Amigável para motores de busca: Motores indexam separadamente cada página, diferente do carregamento infinito.
Anatomia
Composto por no mínimo 5 elementos, podendo apresentar outros elementos opcionais dependendo do estilo
Controles de navegação: Botões para “Voltar”, “Avançar”, “Ir para a primeira” ou “Ir para a última” página.
Seleção de Itens por Página: Um controle (geralmente dropdown) que permite ao usuário definir quantas linhas ou produtos deseja ver simultaneamente, o que afeta diretamente o número total de páginas.
Truncamento (Overflow Menu): Uso de reticências (…) para lidar com um grande volume de páginas, podendo ser interativo para abrir uma lista completa de opções.
Indicador de página ativa: Um destaque visual que mostra exatamente onde o usuário está no momento.
Onde usar
Listas de resultados de busca
Google, buscadores internos de e-commerce, busca de documentos jurídicos, busca de processos em sistemas governamentais.
Tabelas de dados administrativas
Dashboards de back-office, CRMs, ERPs, painéis de gestão
Listagens de catálogo com filtros pesados
E-commerce (Mercado Livre, Amazon), marketplaces B2B, catálogos de imóveis (QuintoAndar, ZAP)
Sistemas de gestão de conteúdo
CMS (WordPress admin, Strapi), bibliotecas de mídia, gestores de posts, listas de usuários em painéis admin
Relatórios e exportações
Listas de transações financeiras, extratos bancários, logs de auditoria, históricos de pedidos.
Inboxes de email e sistemas de tickets
Gmail (modo clássico), Zendesk, Jira, Linear (parcialmente)
Fóruns e threads longas
Reddit (comentários paginados em threads gigantes), Stack Overflow (respostas paginadas), fóruns tradicionais (phpBB, Discourse parcialmente).
Resultados de API e documentação técnica
Listagens de endpoints, logs de chamadas, histórico de deploys (Vercel, Netlify dashboards), histórico de commits em ferramentas Git.
Listas de transações em apps bancários e fintechs
Nubank, Itaú, C6. Aqui é interessante: muitos usam infinite scroll na visualização principal mas paginação na busca/filtro.
Variações
 |  |  | |
|---|---|---|---|
Variante | Cada página agrupa os itens que começam pela mesma letra (A, B, C…) | Os itens carregam sozinhos conforme o usuário rola até o fim da lista. | Mostra um lote inicial e um botão “Carregar mais” que anexa o próximo lote. |
Quando usar | Listas de contatos, glossários, diretórios, catálogos de marcas A-Z. | Feeds de descoberta e consumo contínuo, sem objetivo de achar um item específico | Catálogos e listas em que o usuário às vezes quer ver mais, mas você precisa manter o rodapé acessível. |
Pontos positivos | ✅ Acesso direto à letra desejada sem percorrer a lista toda. ✅ Mapa mental óbvio quando o dado é nominal ✅ Previsível e indexável por buscadores. | ✅ Fluxo sem fricção, ideal para navegação exploratória e mobile. ✅ Zero clique para continuar. ✅ Mantém o usuário engajado por mais tempo. | ✅ O usuário controla o carregamento com clique explícito. ✅ Preserva o rodapé. ✅ Mais leve que o scroll Infinito |
Pontos negativos | ❌ Letras como A e S ficam lotadas, X e Y vazias ❌ Inútil para dado não-alfabético | ❌ Torna o rodapé inalcançável. ❌ Impossível marcar ou voltar a uma posição. ❌ Ruim para SEO e para achar item específico. ❌ Consumo de memória cresce sem parar. | ❌ Não dá para pular para um ponto distante ❌ Voltar a uma posição é difícil. ❌ Cada clique é uma micro-fricção que cansa em listas longas. |
Acessibilidade
A
Ícones de voltar e prosseguir não devem ser somente setas, devem acompanhar um texto (WCAG 1.1.1)
A página atual não pode ser sinalizada apenas por cor (WCAG 1.4.1)
propósito de cada item de página deve ficar claro pelo próprio texto ou pelo contexto (WCAG 2.4.4)
Quando o controle tem um texto visível, o rótulo lido por tecnologia assistiva precisa conter esse mesmo texto (WCAG 2.5.3)
AA
Texto de página precisa ter contraste mínimo de 4.5:1 com fundo (WCAG 1.4.3)
Os elementos não-textuais que comunicam estado precisam contraste mínimo de 3:1 (WCAG 1.4.11)
Todo item navegável precisa de indicador de foco visível (WCAG 2.4.7)
A área clicável de cada controle precisa ter no mínimo 24×24px (WCAG 2.5.8)
Os controles devem continuar utilizáveis quando o texto é ampliado até 200% (WCAG 1.4.4)
Em largura equivalente a 320px, a paginação precisa continuar funcional (WCAG 1.4.10)
O item em foco não pode ficar escondido atrás de outro elemento da interface (WCAG 2.4.11)
A paginação deve ser identificada da mesma forma em todas as telas onde aparece (WCAG 3.2.4)
AAA
Texto pode atingir contraste reforçado de 7:1 contra o fundo (WCAG 1.4.6)
A área clicável pode atingir 44×44px (WCAG 2.5.5)
O componente deve deixar claro onde o usuário está dentro do conjunto total (WCAG 2.4.8)
O indicador de foco pode ter aparência reforçada: área e contraste mínimos definidos (WCAG 2.4.13)
Boas práticas
Posicionamento fácil de encontrar
Geralmente no topo ou no fim da página
Garanta que os links são clicáveis
Aumente a área de cilck para garantir que o usuário selecione corretamente a página desejada
Ofereça customização
Permita que usuários mudarem a quantidade de itens que são exibidos na página
Pular para início ou fim da página
Inclua botões para permitir esses pulos
Mostrar a posição atual do usuário
Deixe claro a posição do usuário com um estado bem visível