Pagination

How to use it

Use at the bottom of any paged list. Link each page number to the URL that loads it; mark the active page with aria-current="page" instead of styling alone, and keep Prev/Next labelled for people who skip straight to them.

Accessibility

The <nav> has an aria-label describing it as pagination, each page is a real link so it works without JavaScript, and aria-current="page" tells assistive tech which page is showing. The current page's white-on-blue text meets 6.70:1 contrast; the other links are 9.90:1.

Source (copy-ready)

<nav class="dcl-pagination" aria-label="Pagination">
  <a href="?page=1" class="dcl-pagination__link" aria-label="Previous page" rel="prev">&lsaquo; Prev</a>
  <a href="?page=1" class="dcl-pagination__link dcl-pagination__link--current" aria-current="page">1</a>
  <a href="?page=2" class="dcl-pagination__link">2</a>
  <a href="?page=3" class="dcl-pagination__link">3</a>
  <a href="?page=2" class="dcl-pagination__link" aria-label="Next page" rel="next">Next &rsaquo;</a>
</nav>
<style>
.dcl-pagination { display: flex; gap: 0.35rem; font: inherit; background-color: #f8fafc; padding: 0.5rem; border-radius: 6px; }
.dcl-pagination__link { display: inline-block; padding: 0.35rem 0.65rem; border-radius: 4px; text-decoration: none; color: #334155; background-color: #f8fafc; }
.dcl-pagination__link:hover { background-color: #e2e8f0; }
.dcl-pagination__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.dcl-pagination__link--current { background-color: #1d4ed8; color: #ffffff; font-weight: 600; }
.dcl-pagination__link--current:hover { background-color: #1d4ed8; }
</style>