Component

Pagination

Published on

Description

The Pagination component links to the previous page, the next page, and numbered pages of a long list of results. It renders plain links, so it works without JavaScript.

Pass current, total, and href. href is a template such as ?page={n} or a function that takes a page number and returns a URL. Long ranges collapse to the first page, the last page, and the pages either side of the current one.

Previous is left out on the first page and Next on the last page. Change the text with labelPrevious, labelNext, and labelPage.

Example

Open in new tab
View HTML markup 
<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="?page=4" rel="prev">Previous</a></li>
    <li><a href="?page=1"><span class="visually-hidden">Page </span>1</a></li>
    <li>…</li>
    <li><a href="?page=4"><span class="visually-hidden">Page </span>4</a></li>
    <li><a href="?page=5" aria-current="page"><span class="visually-hidden">Page </span>5</a></li>
    <li><a href="?page=6"><span class="visually-hidden">Page </span>6</a></li>
    <li>…</li>
    <li><a href="?page=10"><span class="visually-hidden">Page </span>10</a></li>
    <li><a href="?page=6" rel="next">Next</a></li>
  </ul>
</nav>

Accessibility

  • The links sit in a <nav aria-label="Pagination"> landmark, so screen reader users can jump to it.
  • The current page link has aria-current="page", and is bold and underlined.
  • Numbered links include visually hidden text, so they read as "Page 2" instead of "2".
  • Previous and Next carry rel="prev" and rel="next". Missing ones are left out, never shown as disabled links.
  • Every link is at least 44 by 44 CSS pixels.

References

  • Links — for general-purpose navigation

Variables

None