Components

Pagination

Route-based page navigation with .pagination from wckd-ui-components.css. Render links as real URLs, mark the active item with both li.active and aria-current="page", and include previous/next affordances where useful.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing 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 synchronized 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