Home
Components
Pagination

Pagination

Use pagination to link to additional content when the number of items in a group is greater than what can be displayed on a single page.

Omit the href attribute on the outer anchor elements when the pagination list cannot be advanced any further in one direction. (The older version used buttons instead of links, in which case the arrow buttons should use the disabled attribute when the pagination list cannot be advanced any further in one direction.)

Use aria-current="page" on a link to highlight the current page.

Example
Pagination with three pages.

HTML

<div class="pv-pagination">
  <a><span aria-hidden="true">&laquo;<span class="pv-visually-hidden">Previous 5 Pages</span></a>
  <a><span aria-hidden="true">&lsaquo;<span class="pv-visually-hidden">Previous Page</span></a>
  <ol role="list">
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ol>
  <a href="#"><span aria-hidden="true">&rsaquo;<span class="pv-visually-hidden">Next Page</span></a>
  <a href="#"><span aria-hidden="true">&raquo;<span class="pv-visually-hidden">Next 5 Pages</span></a>
</div>