O que é?

Paginação é o componente que organiza o conteúdo em páginas numeradas limitando a visualização dos dados para melhor usabilidade de consumo.

Anatomia

1. Arrows (ícones)
2. Page itens
3. Indicador

Como usar

Usado em conjunto com Tabelas e listagens.

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    <li> <a class="pagination-previous"> <i class="fa-light fa-chevron-left"></i></a> </li>
    <li><a class="pagination-link is-current" aria-label="Page 1">1</a></li>
    <li><a class="pagination-link" aria-label="Goto page 2">2</a></li>
    <li><a class="pagination-link" aria-label="Goto page 3" aria-current="page">3</a></li>
    <li><a class="pagination-link" aria-label="Goto page 4">4</a></li>
    <li><a class="pagination-link" aria-label="Goto page 5">5</a></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><a class="pagination-link" aria-label="Goto page N">N</a></li>
    <li> <a class="pagination-next"> <i class="fa-light fa-chevron-right"></i></a> </li>
  </ul>
</nav>

Limitado

Variação da paginação com um número pequeno de páginas, nesse contexto não precisamos dos ícones de setas para avançar entreas páginas.

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    <li><a class="pagination-link is-current" aria-label="Page 1">1</a></li>
    <li><a class="pagination-link" aria-label="Goto page 2">2</a></li>
    <li><a class="pagination-link" aria-label="Goto page 3" aria-current="page">3</a></li>
  </ul>
</nav>

Comportamento

A partir da quinta posição o componente fica no estado do meio, como mostra o exemplo abaixo, e continua até faltar 4 posições para chegar ao limite das páginas, como mostra o último exemplo:

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    <li> <a class="pagination-previous"> <i class="fa-light fa-chevron-left"></i></a> </li>
    <li><a class="pagination-link is-current" aria-label="Page 1">1</a></li>
    <li><a class="pagination-link" aria-label="Goto page 2">2</a></li>
    <li><a class="pagination-link" aria-label="Goto page 3" aria-current="page">3</a></li>
    <li><a class="pagination-link" aria-label="Goto page 4" aria-current="page">4</a></li>
    <li><a class="pagination-link" aria-label="Goto page 5" aria-current="page">5</a></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><a class="pagination-link" aria-label="Goto page 3" aria-current="page">20</a></li>
    <li> <a class="pagination-next"> <i class="fa-light fa-chevron-right"></i></a> </li>
  </ul>
</nav>

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    <li> <a class="pagination-previous"> <i class="fa-light fa-chevron-left"></i></a> </li>
    <li><a class="pagination-link is-current" aria-label="Page 1">1</a></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><a class="pagination-link" aria-label="Goto page 4" aria-current="page">4</a></li>
    <li><a class="pagination-link" aria-label="Goto page 5" aria-current="page">5</a></li>
    <li><a class="pagination-link" aria-label="Goto page 6" aria-current="page">6</a></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><a class="pagination-link" aria-label="Goto page 3" aria-current="page">20</a></li>
    <li> <a class="pagination-next"> <i class="fa-light fa-chevron-right"></i></a> </li>
  </ul>
</nav>

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    <li> <a class="pagination-previous"> <i class="fa-light fa-chevron-left"></i></a> </li>
    <li><a class="pagination-link is-current" aria-label="Page 1">1</a></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><a class="pagination-link" aria-label="Goto page 16" aria-current="page">16</a></li>
    <li><a class="pagination-link" aria-label="Goto page 17" aria-current="page">17</a></li>
    <li><a class="pagination-link" aria-label="Goto page 18" aria-current="page">18</a></li>
    <li><a class="pagination-link" aria-label="Goto page 19" aria-current="page">19</a></li>
    <li><a class="pagination-link" aria-label="Goto page 20" aria-current="page">20</a></li>
    <li> <a class="pagination-next"> <i class="fa-light fa-chevron-right"></i></a> </li>
  </ul>
</nav>

Acessibilidade

Procure adicionar o atributo role no elemento pai de paginação para…

Para cara link que represente uma página, adicione o atributo aria-label com a respectiva ação, como por exemplo “Ir para a página 3”, isso será lido por ferramentas que lêem telas e melhorará a experiência para aqueles que usam essas ferramentas.

Lista de modificadores

Modificador	Descrição
.pagination	Define que o elemento como Pagination
.is-center, .is-right	Muda o posicionamento da paginação no container
.is-rounded	Estilo circular de link