Pagination · kit

Example

Show the markup

<div class="kit-stack" data-gap="4">
  <nav aria-label="Example pagination">
    <ul class="kit-pagination">
      <li><a href="#pagination" rel="prev">Previous</a></li>
      <li><a href="#pagination"><span class="kit-vh">Page </span>1</a></li>
      <li><a href="#pagination"><span class="kit-vh">Page </span>2</a></li>
      <li><a href="#pagination" aria-current="page"><span class="kit-vh">Page </span>3</a></li>
      <li><a href="#pagination"><span class="kit-vh">Page </span>4</a></li>
      <li><span class="kit-pagination-gap" aria-hidden="true">…</span></li>
      <li><a href="#pagination"><span class="kit-vh">Page </span>12</a></li>
      <li><a href="#pagination" rel="next">Next</a></li>
    </ul>
  </nav>
  <nav aria-label="Compact pagination">
    <ul class="kit-pagination" data-compact>
      <li><span aria-disabled="true">Previous</span></li>
      <li><span class="kit-pagination-status">Page 1 of 12</span></li>
      <li><a href="#pagination" rel="next">Next</a></li>
    </ul>
  </nav>
</div>

Usage

<nav aria-label="Pagination">
  <ul class="kit-pagination">
    <li><a href="?page=2" rel="prev">Previous</a></li>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=3" aria-current="page">3</a></li>
    <li><span class="kit-pagination-gap">…</span></li>
    <li><a href="?page=12">12</a></li>
    <li><a href="?page=4" rel="next">Next</a></li>
  </ul>
</nav>

Pages are links your server renders, so they can be bookmarked and shared. On the first or last page, show previous or next as <span aria-disabled="true">, not a dead link. data-compact keeps only previous, the current page of the total, and next, for small spaces.

Accessibility

A nav landmark named "Pagination". The current page has aria-current="page".
Number links read as bare numbers; add hidden text when the context isn't clear ("Page 3"), using <span class="kit-vh">Page </span>3.
Targets are at least 36px square.