Pagination

For lists too long for one page: search results, news, a table of applications.

When not to use

For steps in a form. Use Continue and Back buttons. For fewer than about 25 items, show them all.

Show HTML

<nav aria-label="Pagination">
  <ul class="ag-pagination ag-mb-0">
    <li><a class="ag-pagination__link" href="#pagination-example" rel="prev">Previous</a></li>
    <li><a class="ag-pagination__link" href="#pagination-example">1</a></li>
    <li><a class="ag-pagination__link" href="#pagination-example" aria-current="page">2</a></li>
    <li><a class="ag-pagination__link" href="#pagination-example">3</a></li>
    <li><span class="ag-pagination__ellipsis" aria-hidden="true">…</span></li>
    <li><a class="ag-pagination__link" href="#pagination-example">12</a></li>
    <li><a class="ag-pagination__link" href="#pagination-example" rel="next">Next</a></li>
  </ul>
</nav>

Variant: previous and next

For an article series or a form's review pages, where numbers mean nothing: ag-pagination--simple with two links at either end of the row.

Show HTML

<nav aria-label="Pagination">
  <ul class="ag-pagination ag-pagination--simple ag-mb-0">
    <li><a class="ag-pagination__link" href="#pagination-simple" rel="prev">Previous: Our journey</a></li>
    <li><a class="ag-pagination__link" href="#pagination-simple" rel="next">Next: Our mandate</a></li>
  </ul>
</nav>

Accessibility

Every link is a real URL with the page number in it, so it works without script and can be bookmarked.
The current page has aria-current="page" and is still a link, so its position is announced.
Previous and Next carry rel attributes for browsers and crawlers.
Show at most seven numbers; use the ellipsis for the rest.