C7 · Componentes

Pagination

Navegação para conjuntos de dados paginados. Reticências quando o intervalo é grande. Página ativa marcada com fundo de acento.

Comportamento

Cenário	Apresentação
≤ 7 páginas	Mostre todos os números.
> 7 páginas	Primeira, última, vizinhas (±2) + reticências.
Primeira página	Botão 'Anterior' desabilitado.
Última página	Botão 'Próxima' desabilitado.

Estrutura

<nav role="navigation" aria-label="Pagination">
  <a href="?p=1" aria-label="Anterior">←</a>
  <a href="?p=1">1</a>
  <span aria-hidden="true">…</span>
  <a href="?p=4">4</a>
  <a href="?p=5" aria-current="page">5</a>
  <a href="?p=6">6</a>
  <span aria-hidden="true">…</span>
  <a href="?p=42">42</a>
  <a href="?p=6" aria-label="Próxima">→</a>
</nav>

Acessibilidade

Wrapper com aria-label='Pagination'.
Página atual com aria-current='page'.
Reticências decorativas com aria-hidden='true'.
Tap target ≥ 44x44px.