Components

Pagination

Paged routes: ul.pagination (or ol) with li + real a href. Active page: li.active and aria-current="page" on the link.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Basic pagination

A simple ul.pagination with previous/next affordances and an active page.

Markup

<ul class="pagination no-bullets">
  <li class="active"><a href="?p=1" aria-current="page">1</a></li>
  <li><a href="?p=2">2</a></li>
</ul>

When to use

  • Search, archive, and listing pages where result sets span multiple URLs.
  • Tables or directories where server-side paging is preferred over infinite scroll.

Implementation notes

  • Use route/query URLs, not JS-only clicks, for crawlable and shareable paging.
  • Keep active state synchronised between li.active and aria-current="page".

Developer checklist

  • Wrap pagination in a <nav aria-label="Pagination"> region when used in page layouts.
  • Ensure every item is keyboard reachable and has clear text/label for previous and next controls.
  • Reflect the active route in both visual and ARIA state (li.active + aria-current="page").

← All components