Pagination

Pagination provides navigation controls for moving between pages of content.

Usage

Use .Pagination as a <nav> element containing .Pagination-Link items.

<nav class="Pagination" aria-label="Page navigation">
  <a class="Pagination-Link" href="?page=1" aria-label="Previous">‹</a>
  <a class="Pagination-Link" href="?page=1">1</a>
  <a class="Pagination-Link" href="?page=2" data-active aria-current="page">2</a>
  <a class="Pagination-Link" href="?page=3">3</a>
  <span class="Pagination-Gap">…</span>
  <a class="Pagination-Link" href="?page=10">10</a>
  <a class="Pagination-Link" href="?page=3" aria-label="Next">›</a>
</nav>

Variants

Use .compact for a minimal pagination bar showing only previous/next controls.

<nav class="Pagination compact" aria-label="Page navigation">
  <a class="Pagination-Link" href="?page=1">← Previous</a>
  <a class="Pagination-Link" href="?page=3">Next →</a>
</nav>

States

• data-active or aria-current="page": Marks the current page link.
• data-disabled or aria-disabled="true": Marks a link as non-interactive (e.g. no previous page).

<a class="Pagination-Link" data-active aria-current="page" href="?page=2">2</a>
<a class="Pagination-Link" data-disabled aria-disabled="true">‹</a>

Structure

• .Pagination-Link: An individual page link or prev/next control.
• .Pagination-Gap: A non-interactive ellipsis element between page ranges.