Pagination Component — Astro

Pagination Component

An accessible pagination component for navigating between pages. Supports previous/next, first/last, page numbers with ellipsis for long ranges, and a configurable URL pattern.

Props

• currentPage (number, required) - The current page number (1-based)
• totalPages (number, required) - Total number of pages
• hrefTemplate (string, optional) - URL pattern with {page} placeholder (default: ?page={page})
• showFirstLast (boolean, optional) - Show First and Last links (default: true)
• maxVisible (number, optional) - Max page numbers to show before using ellipsis (default: 5)
• class (string, optional) - Additional CSS classes

Basic Usage

Click any page to see the current page update. The example uses syncHash so the URL hash and current page stay in sync.

---
import Pagination from '../../components/Pagination.astro';
---

<Pagination
  currentPage={3}
  totalPages={10}
  hrefTemplate="?page={page}"
/>

With Query String

Use hrefTemplate to build URLs. The {page} placeholder is replaced with the page number. For in-page demos we use hash links with syncHash so the current page updates without a full reload:

<Pagination
  currentPage={2}
  totalPages={5}
  hrefTemplate="/blog?page={page}"
/>

Without First/Last

<Pagination
  currentPage={5}
  totalPages={10}
  showFirstLast={false}
  hrefTemplate="?page={page}"
/>

Many Pages (Ellipsis)

When totalPages exceeds maxVisible, ellipsis (…) is shown between the first/last and the range around the current page:

First and Last Page

Previous/Next and First/Last are disabled when on the first or last page:

Verifying the examples

All live examples above use hrefTemplate="#page-{page}" and syncHash. To confirm they work: open this page, click different page numbers (and First/Previous/Next/Last where shown). The URL hash should update (e.g. #page-5) and the current page highlight should move. Changing the hash in the address bar (e.g. to #page-1) should update the highlighted page.

Features

• Semantic markup - <nav aria-label="Pagination"> with list of links
• Previous / Next - Always shown; disabled (non-clickable) on first/last page
• First / Last - Optional; controlled by showFirstLast
• Page numbers - Current page has aria-current="page" and is not a link
• Ellipsis - When many pages, shows 1 … 4 5 6 … 10 style range
• Configurable URLs - hrefTemplate with {page} placeholder
• Theme-aware - Uses design system variables

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above.