Pagination

Usage

Use pagination for long, stable lists people navigate by position: the work-order table, the vehicle register, audit logs. For feeds and activity streams use a "Show 20 more" button; for short lists show everything.

• Always show first and last page, the current page and its neighbours; collapse the rest into "…".
• Labels: "Previous" / "Next", "Page 3 of 12", "Rows per page", "Showing 21–40 of 312 work orders" — name the thing being counted.
• Keep the page in the URL (?page=8) so links and the back button work.

Anatomy

1. Landmark — nav.pagination[aria-label] naming the list
2. Previous / Next — .pagination__link--step (plain text when unavailable)
3. Page links — a.pagination__link with hidden "Page "
4. Ellipsis — .pagination__ellipsis
5. Current page — aria-current="page": fill, border, bold
6. Table footer (optional) — .pagination__bar with page size and range

Examples

States marked hover, focus-visible and active are frozen with .is-hover, .is-focus-visible, .is-active. Those classes share their rule with the real pseudo-class, so what you see is exactly what users get. Never use them in product code.

<nav class="pagination" aria-label="Pagination, work orders">
  <ul class="pagination__list">
    <li><a class="pagination__link pagination__link--step" href="?page=7" rel="prev">…Previous</a></li>
    <li><a class="pagination__link" href="?page=1"><span class="sr-only">Page </span>1</a></li>
    <li><span class="pagination__ellipsis">…</span></li>
    <li><a class="pagination__link" href="?page=8" aria-current="page"><span class="sr-only">Page </span>8</a></li>
    …
    <li><a class="pagination__link pagination__link--step" href="?page=9" rel="next">Next…</a></li>
  </ul>
</nav>

<!-- First page: Previous is not a link -->
<li><span class="pagination__link pagination__link--step" aria-disabled="true">…Previous</span></li>

API

Do and don't

Accessibility

• Each <nav> has a unique name ("Pagination, work orders") when several lists share a page.
• Page links read "Page 8, current page" thanks to the hidden prefix and aria-current.
• After a page change, move focus to the table caption or heading and update the range text (role="status").
• Targets are 40px; icon-only compact links have aria-label. Arrow icons mirror in RTL.

Tokens