COMPONENTS

Pagination

One pagination class arranges native page links. Shared theme, size, density, shape, depth, borders, gap and optional glass styling inherit from the parent. Your server or application supplies page destinations.

Usage

Markup: nav.pagination > ol > li

Behaviour: Applications supply URLs, page counts and results.

Use a labelled nav and ordered list. Give numeric links accessible names such as Page 2. Mark exactly one current page with aria-current="page".
Unavailable controls are spans with aria-disabled="true", without href or tabindex. aria-disabled alone does not stop a link from navigating. Ellipses are text, not controls.
CSS provides presentation only. It does not fetch results, calculate page counts, change the current page or restore focus after an application update.
The live demo links navigate to this page's example anchors to demonstrate native navigation. Production markup should point to actual result pages.
A decorative underline follows eligible links on hover or keyboard focus, then returns to the current page. The current page keeps its own styling throughout. CSS anchor positioning and anchor-scope enable this default enhancement; unsupported browsers retain ordinary pagination. Shared data-motion controls duration, and reduced motion removes transitions. The effect reserves ::after on the direct ol.

Component API and styling module · Inherited appearance settings

Current and unavailable pages

The current page and unavailable Previous control are plain spans. Demo links have real anchor destinations.

<nav class="pagination" aria-label="Example pages">
  <ol role="list">
    <li><span aria-disabled="true">Previous</span></li>
    <li><span aria-current="page" aria-label="Page 1">1</span></li>
    <li><a href="#pagination-more" aria-label="Page 2">2</a></li>
    <li><a href="#pagination-glass" aria-label="Page 3">3</a></li>
    <li><a href="#pagination-more" rel="next">Next</a></li>
  </ol>
</nav>

A longer range

Ellipses are passive text. Links wrap rather than stretching the page beyond its container.

<nav class="pagination" aria-label="Long example page range">
  <ol role="list">
    <li><a href="#pagination-basic" rel="prev">Previous</a></li>
    <li><a href="#pagination-basic" aria-label="Page 1">1</a></li>
    <li><span aria-label="More pages">…</span></li>
    <li><span aria-current="page" aria-label="Page 8">8</span></li>
    <li><span aria-label="More pages">…</span></li>
    <li><a href="#pagination-glass" aria-label="Page 20">20</a></li>
    <li><a href="#pagination-glass" rel="next">Next</a></li>
  </ol>
</nav>

Inherited glass and pill shape

The parent supplies material and shape; page links need no styling attributes.

<section data-theme="dark" data-material="glass" data-shape="pill">
  <nav class="pagination" aria-label="Glass example pages">
    <ol role="list">
      <li><a href="#pagination-basic" rel="prev">Previous</a></li>
      <li><a href="#pagination-basic" aria-label="Page 1">1</a></li>
      <li><span aria-current="page" aria-label="Page 2">2</span></li>
      <li><span aria-disabled="true">Next</span></li>
    </ol>
  </nav>
</section>

Application URL pattern

Replace these sample paths with routes served by your application. This is code-only to avoid navigating to unimplemented demo routes.

<nav class="pagination" aria-label="Search result pages">
  <ol role="list">
    <li><a href="/search?page=1" rel="prev">Previous</a></li>
    <li><a href="/search?page=1" aria-label="Page 1">1</a></li>
    <li><span aria-current="page" aria-label="Page 2">2</span></li>
    <li><a href="/search?page=3" aria-label="Page 3">3</a></li>
    <li><a href="/search?page=3" rel="next">Next</a></li>
  </ol>
</nav>