Skip to content

Pagination

Stable Available in release assets

Navigate between related result pages with durable links and a clearly marked current page.

Pagination primary example

Show code
<nav class="thin-pagination" aria-label="Pagination">
  <a href="?page=1">Previous</a>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <a href="?page=3">Next</a>
</nav>

Each authored example uses the production assets and includes copyable markup.

Numbered pages

Every destination is an ordinary link; only the current page uses aria-current=page.

Show code
<nav class="thin-pagination" aria-label="Pagination">
  <a href="?page=1">Previous</a>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <a href="?page=3">Next</a>
</nav>

Previous and next only

A compact control keeps previous and next actions as durable links.

Show code
<nav class="thin-pagination" aria-label="Pagination">
  <a href="?page=1">Previous</a>
  <span>Page 2 of 5</span>
  <a href="?page=3">Next</a>
</nav>

Long localized labels

Localized previous and next labels remain readable and meet the shared control minimum size.

Show code
<nav class="thin-pagination" aria-label="Pagination">
  <a href="?page=1">Précédent</a>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <a href="?page=3">Suivant</a>
</nav>

Anatomy

  • Named .thin-pagination landmark
  • Previous and next links
  • Numbered page links
  • Optional current-page status text
  • Current page link with aria-current=page

Variants and sizes

  • Numbered pages — shown above
  • Previous and next — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default
  • Current page
  • Long localized labels
  • Narrow container
  • Right-to-left content
  • 200% and 400% zoom
  • Forced colors
  • Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links perform ordinary GET navigation. The server owns page boundaries; the control does not add client-side paging state.

Accessibility

Give the landmark an accessible name, keep every destination a real link or visible text, mark only the current page with aria-current=page, and preserve logical source and focus order.

Contract
NATIVE
Basis
Native <nav>, lists, and links; no APG widget
Evidence
  • tests/unit/library/navigation-stable.test.ts

API

Use .thin-pagination with aria-label. Put previous, numbered, and next destinations in ordinary anchor elements. Use aria-current=page on the current page link.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The complete set of page links and current-page marker remains readable without CSS or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/pagination/style.ts

Stability evidence

  • Semantic page links, current-page state, and no-JavaScript fixture: test:tests/unit/library/components.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/navigation-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Used by