Browse Components
Pagination
Move through a collection one page at a time.
Basic
Change pages to browse the sample projects. This demo listens for pagination:change; your application supplies its own results.
- Project 01
- Project 02
- Project 03
- Project 04
- Project 05
Showing 1–5 of 50 projects
View Code
<div class="stack" data-pagination-demo>
<ul data-page-results>
<li>
Project 01
</li>
<li>
Project 02
</li>
<li>
Project 03
</li>
<li>
Project 04
</li>
<li>
Project 05
</li>
</ul>
<p class="muted" data-page-summary>
Showing 1–5 of 50 projects
</p>
<nav
class="pagination"
aria-label="Results pages"
data-pagination
data-pagination-total="10"
data-pagination-page="1"
>
<p class="pagination-summary">
Page 1 of 10. Enable JavaScript to change pages.
</p>
</nav>
</div>Many pages
First and last pages stay available, with nearby pages and noninteractive ellipses. Narrow containers use a compact page report.
- Project 01
- Project 02
- Project 03
- Project 04
- Project 05
Showing 1–5 of 50 projects
View Code
<div class="stack" data-pagination-demo>
<ul data-page-results>
<li>
Project 01
</li>
<li>
Project 02
</li>
<li>
Project 03
</li>
<li>
Project 04
</li>
<li>
Project 05
</li>
</ul>
<p class="muted" data-page-summary>
Showing 1–5 of 50 projects
</p>
<nav
class="pagination"
aria-label="Results pages"
data-pagination
data-pagination-total="100"
data-pagination-page="50"
>
<p class="pagination-summary">
Page 50 of 100. Enable JavaScript to change pages.
</p>
</nav>
</div>Simple
First, previous, next, and last controls with a page report at every width.
View Code
<nav
class="pagination"
aria-label="Results pages"
data-pagination
data-pagination-simple
data-pagination-total="10"
data-pagination-page="1"
>
<p class="pagination-summary">
Page 1 of 10. Enable JavaScript to change pages.
</p>
</nav>Page links
Use real destinations for routed navigation. These example links open Learn pages without JavaScript.
View Code
<nav class="pagination" aria-label="Guide pages">
<ul class="pagination-list">
<li>
<span class="pagination-control" aria-disabled="true" aria-label="First Page">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m11.5 5-7 7 7 7m8-14-7 7 7 7">
</path>
</svg>
</span>
</li>
<li>
<span class="pagination-control" aria-disabled="true" aria-label="Previous Page">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m15 5-7 7 7 7">
</path>
</svg>
</span>
</li>
<li>
<span class="pagination-control" aria-current="page" aria-label="Page 1">
1
</span>
</li>
<li>
<a class="pagination-control" href="/docs" aria-label="Page 2: Introduction">
2
</a>
</li>
<li>
<a
class="pagination-control"
href="/docs/components"
aria-label="Page 3: Components"
>
3
</a>
</li>
<li>
<a class="pagination-control" href="/docs" rel="next" aria-label="Next Page">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</a>
</li>
<li>
<a class="pagination-control" href="/docs/components" aria-label="Last Page">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m4.5 5 7 7-7 7m8-14 7 7-7 7">
</path>
</svg>
</a>
</li>
</ul>
</nav>Right-to-left
Logical order follows the reading direction, including the compact layout.
View Code
<nav
class="pagination"
dir="rtl"
aria-label="Results pages"
data-pagination
data-pagination-total="10"
data-pagination-page="1"
>
<p class="pagination-summary">
Page 1 of 10. Enable JavaScript to change pages.
</p>
</nav>Single page
One page keeps its context with both directions unavailable.
View Code
<nav
class="pagination"
aria-label="Results pages"
data-pagination
data-pagination-total="1"
data-pagination-page="1"
>
<p class="pagination-summary">
Page 1 of 1. Enable JavaScript to change pages.
</p>
</nav>Empty
Zero pages disables navigation without inventing a first page.
View Code
<nav
class="pagination"
aria-label="Results pages"
data-pagination
data-pagination-total="0"
data-pagination-page="1"
>
<p class="pagination-summary">
Page 0 of 0. Enable JavaScript to change pages.
</p>
</nav>Disabled
Disable pagination while the associated content is unavailable or loading.
View Code
<nav
class="pagination"
aria-label="Results pages"
data-pagination
data-pagination-disabled
data-pagination-total="10"
data-pagination-page="1"
>
<p class="pagination-summary">
Page 1 of 10. Enable JavaScript to change pages.
</p>
</nav>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/pagination.css">
<script defer src="/library/assets/pagination.js"></script>10,230 bytes CSS including base · 5,356 bytes runtime JavaScript
Usage
Choose links or buttons
Use real links for separate pages. Use the optional runtime for in-page results and listen for pagination:change to update the content; the component never fetches data for you.
Keep state synchronized
Totals are page counts, not record counts. Compute Math.ceil(totalRecords / pageSize), reset the current page after filtering, and call layoutPagination.refresh(nav). Zero pages disables both directions.
Keep navigation accessible
Name each pagination landmark, mark the current page, and keep disabled controls out of the tab order. Update a result summary after loading and retain keyboard focus. Localize the labels and page report for your application.
Fit the container
Below 560px of available component width the enhanced control uses first/previous chevrons, a page report, and next/last chevrons. data-pagination-simple uses this layout everywhere. Ellipses indicate skipped pages and are not menu buttons.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.