4.2.3 molecules.navigation.pagination Pagination

Toggle example guides Toggle HTML markup

Provide pagination links with the multi-page pagination component. On mobile we only show the pagination items "previous", "next" and "active".

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Example
Markup: 03-molecules/navigation/pagination/pagination.twig
<nav role="navigation" aria-labelledby="pagination-heading" class="pager-nav text-center">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pagination">
    <li class="disabled pager__item--previous">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">
         <svg class="icon-small icon-gray">
           <use xlink:href="#icon-navigate_before"></use>
         </svg>
        </span>
      </a>
    </li>
    <li class="active">
      <a href="#">1
        <span class="sr-only"> (current) </span>
      </a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="pager__item--next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">
          <svg class="icon-small icon-gray">
           <use xlink:href="#icon-navigate_next"></use>
         </svg>
        </span>
      </a>
    </li>
  </ul>
</nav>
Source: 03-molecules/navigation/pagination/pagination.scss, line 1