Navegação

Paginação

Pagination

Divide uma coleção em páginas e oferece controles para percorrê-las.

… 12

Exemplo didático · Experimente os controles acima

Quando usar

Navegar em listas extensas mantendo uma posição compartilhável.

Cuidados e acessibilidade

Anuncie a página atual e use links quando houver URLs diferentes.

Partes e comportamento

Página atual, destinos numerados e links anterior e próxima.

Não confunda

Rolagem infinita amplia a lista; paginação divide o conjunto em partes identificáveis.

Exemplo de código

<nav aria-label="Páginas de resultados">
  <a href="?pagina=1" aria-current="page">1</a>
  <a href="?pagina=2">2</a>
  <a href="?pagina=2" aria-label="Próxima página">Próxima</a>
</nav>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Paginação (Pagination) em português do Brasil. Divide uma coleção em páginas e oferece controles para percorrê-las. Contexto de uso: Navegar em listas extensas mantendo uma posição compartilhável. Estrutura: Página atual, destinos numerados e links anterior e próxima. Referência técnica: aria-current="page". Requisito: Anuncie a página atual e use links quando houver URLs diferentes. Considere também: Rolagem infinita amplia a lista; paginação divide o conjunto em partes identificáveis. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗