Pagination

Pagination allows customers to navigate between multiple pages worth of items in a single view.

<nav aria-labelledby="paginated-list">
  <ul class="pagination" id="paginated-list">
    <li class="pagination__item">
      <a aria-label="Jump to the first page" class="pagination__text" href="#">First</a>
    </li>
    <li class="pagination__item">
      <a rel="prev" aria-label="Go to the previous page" class="pagination__text pagination__text--prev" href="#">Prev</a>
    </li>
    <li class="pagination__item pagination__item--current">1</li>
    <li class="pagination__item">
      <a class="pagination__link" rel="next" aria-label="Page 2" href="#">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" aria-label="Page 3" href="#">3</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" aria-label="Page 4" href="#">4</a>
    </li>
    <li class="pagination__item pagination__gap">…</span>
    <li class="pagination__item">
      <a class="pagination__text pagination__text--next" rel="next" aria-label="Go to the next page" href="#">Next</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__text" aria-label="Jump to the last page" href="#">Last</a>
    </li>
  </ul>
</nav>

Description

In most cases we opt for an infinite scroll pattern but for dense tabular data we opt for pagination. This keeps the user oriented on how to navigate such data.

Do

  • Keep the amount of pages clear and concise
  • Truncate results after five items
  • Use First Prev Next Last as action labels

Don't

  • Truncate for fewer than 3 pages
  • Use truncation when infinite scrolling can be used

Accessibility

- Receives `:focus` - Link content should be available to screen readers