Pagination

Page navigation using <nav class="pagination"> wrapping a <ul> of <a class="button ghost square">s. Mark the active page with aria-current="page".

Composed of

Button: The page links and arrows

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/pagination.css" />

Default

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li>
      <a href="?page=0" class="button ghost" aria-label="Previous page">
        <svg><!-- chevron-left --></svg>
        Previous
      </a>
    </li>
    <li>
      <a href="?page=1" class="button ghost square" aria-current="page">1</a>
    </li>
    <li><a href="?page=2" class="button ghost square">2</a></li>
    <li><a href="?page=3" class="button ghost square">3</a></li>
    <li>
      <a href="?page=2" class="button ghost" aria-label="Next page">
        Next
        <svg><!-- chevron-right --></svg>
      </a>
    </li>
  </ul>
</nav>

With ellipsis

Drop a plain <li> with no <a class="button ghost square"> in the list to render a non-interactive ellipsis for truncated ranges.

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="?page=1" class="button ghost square">1</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="?page=4" class="button ghost square">4</a></li>
    <li>
      <a href="?page=5" class="button ghost square" aria-current="page">5</a>
    </li>
    <li><a href="?page=6" class="button ghost square">6</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="?page=10" class="button ghost square">10</a></li>
  </ul>
</nav>

Disabled edges

Links have no native disabled state, so add aria-disabled="true" when a page is at the start or end of the range. It blocks pointer interaction and dims the control while staying a real <a>.

<a class="button ghost square" aria-label="Previous page" aria-disabled="true">
  <svg><!-- chevron-left --></svg>
</a>

API reference

Type	Classes / attributes	What it does
Current	`[aria-current="page"]`	Underlines the current page