pagination

Page navigation

Native links with a quiet current-page fill. Use real destination URLs for server navigation, or native buttons with your application’s page-change handlers. No Mica script is needed.

Try pagination in the complete collection example, including result counts, rows per page, search, sorting, and selection. See data tables for how these pieces work together.

Markup

<footer data-table-footer>
  <div data-page-meta>
    <span role="status" aria-atomic="true">1–10 of 54</span>
    <label data-page-size>Rows per page
      <select name="size"><option selected>10</option><option>20</option></select>
    </label>
  </div>
  <nav data-pagination aria-label="Project pages">
    <span aria-disabled="true">← Previous</span>
    <span data-page-status>Page 1 of 6</span>
    <a data-page-number href="?page=1" aria-current="page" aria-label="Page 1">1</a>
    <a data-page-number href="?page=2" aria-label="Page 2">2</a>
    <span data-page-ellipsis aria-hidden="true">…</span>
    <a data-page-number href="?page=6" aria-label="Page 6">6</a>
    <a href="?page=2" aria-label="Next page">Next →</a>
  </nav>
</footer>

The optional footer lays out result metadata and navigation. It is a container: below 40rem of available content width, an authored data-page-status replaces data-page-number and data-page-ellipsis items. Without that status, numbers remain visible and the footer wraps. The navigation also works alone, retaining its full set of links.

Mark exactly one destination aria-current="page". Ellipses are decorative gaps, not buttons. For unavailable destinations, use a span aria-disabled="true", or a button disabled in client-driven examples. Setting aria-disabled on an anchor alone does not disable navigation.

For client updates, keep focus on the activated paging control when it remains available. If it disappears or becomes disabled, focus the result status with tabindex="-1". Announce the updated range once. At zero results, use “0 results” and “No pages,” with both directions disabled. If the total is unknown, omit numeric totals and expose only the directions the server supports.

Mica does not calculate page ranges, fetch records, update URLs, change page size, or synchronize multiple pagers. Your app owns those operations; a server-rendered form can submit the page-size choice without JavaScript.

API

On the navigation, override --pagination-target (2.125rem) and --pagination-font-size (.8125rem). The footer uses --table-padding (space-lg) and --table-font-size (.8125rem); colors use the shared text, muted-text, and raised-surface roles.