Pagination

Divide uma lista longa em páginas e leva de uma a outra, dizendo onde a pessoa está e quanto falta.

Playground

<nav class="feitio-pagination" aria-label="Páginas dos agendamentos"><ul><li><span aria-current="page">1</span></li><li><a href="#playground-2" aria-label="Página 2">2</a></li><li><span class="gap" aria-hidden="true">…</span></li><li><a href="#playground-7" aria-label="Página 7">7</a></li><li><a class="step" href="#playground-2" rel="next">Próxima<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></a></li></ul><div class="meta"><p class="count">Mostrando 1–20 / 132</p></div></nav>

Quando usar

• Quando uma tabela ou lista passa de umas 25 a 50 linhas.

Quando não usar

• Poucas linhas: mostre todas.
• Rolagem infinita: não. Ela some com o rodapé, não deixa voltar ao mesmo ponto e confunde o leitor de tela.

Exemplos

<nav class="feitio-pagination" aria-label="Páginas de agendamentos">
  <ul>
    <li><a class="step prev" href="?pagina=2" rel="prev">…Anterior</a></li>
    <li><span aria-current="page">3</span></li>
    <li><a class="step" href="?pagina=4" rel="next">Próxima…</a></li>
  </ul>
  <div class="meta">
    <p class="count">Mostrando 41 a 60 de 132 agendamentos</p>
    <div class="per-page" role="group" aria-label="Por página">…</div>
  </div>
</nav>

Variações

• Primeira e última página: o link que não leva a lugar nenhum some, não fica desativado.
• Muitas páginas: a primeira, a última e as vizinhas da atual, com reticências no meio.
• Ao trocar o tamanho: a página nova começa no primeiro item que a pessoa estava vendo.
• Tudo cabe numa página: o componente inteiro some; se só os números somem, "Por página" fica.

Anatomia

Bons e maus padrões

Acessibilidade

• Um <nav> com nome; a página atual com aria-current="page" e sem link.
• Cada número com o nome completo para o leitor de tela ("Página 4").
• Alvos de 40px, mesmo nos números.

Atributos