Navigatie paginatie

Als je een website met veel pagina's hebt, wil je misschien een soort paginering aan elke pagina toevoegen. Hieronder zie je een flexbox-gebaseerde paginering en een zogenaamde breadcrumb.

Links

<div class="pagination justify-content-start">
  <ul>
    <li><a class="first" href="#"></a></li>
    <li><a class="active" href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a class="last" href="#"></a></li>
  </ul>
</div>

Center

<div class="pagination justify-content-center">
  <ul>
    <li><a class="first" href="#"></a></li>
    <li><a class="active" href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a class="surplus" href="javascript:void(0)"></a></li>
    <li><a href="#">10</a></li>
    <li><a class="last" href="#"></a></li>
  </ul>
</div>

Rechts

<div class="pagination justify-content-end">
  <ul>
    <li><a class="first" href="#"></a></li>
    <li><a class="active" href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a class="last" href="#"></a></li>
  </ul>
</div>

Kleurpalet

Klik op een kleur om de paginatie te wijzigen en de code zichtbaar te maken!

Breadcrumb

<div class="breadcrumb">
  <ul>
    <li><a href="#">Pagina 1</a></li>
    <li><a href="#">Pagina 2</a></li>
    <li><span>Huidige pagina</span></li>
  </ul>
</div>