Navigation · astro-ui · Pagination

Pagination

Zero-JS linked page navigation with truncation ellipsis.

Pagination renders fully server-rendered page links — every page is a real <a>, so it works without JS and is crawlable. Pages outside the sibling window collapse into ellipsis; prev/next disable at the ends.

← All components

Features

Real links — crawlable, zero JS
Ellipsis truncation with siblingCount control
prev/next with end-disabling
compact arrows-only mode
2 variants, 3 sizes

Usage

---
import { Pagination } from "astro-ui";
---

<Pagination
  page={2}
  total={9}
  pageHref={(p) => `/blog?page=${p}`}
/>

Demos

Basic

<Pagination
  page={4}
  total={12}
  pageHref={(p) => `?page=${p}`}
/>

Compact

<Pagination compact page={2} total={5} pageHref={(p) => `?p=${p}`} />

API

Props

Prop	Type	Default	Description
`page`	`number`	`required`	1-based current page.
`total`	`number`	`required`	Total pages.
`pageHref`	`(page: number) => string`	`required`	URL builder per page.
`siblingCount`	`number`	`1`	Pages shown each side before truncation.
`showPrevNext`	`boolean`	`true`	Prev/next controls.
`compact`	`boolean`	`false`	Arrows-only mode.
`variant`	`"outline" \| "ghost"`	`"outline"`	Control style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Scale.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Why links instead of buttons?

Pagination navigates — real anchors keep it functional without JS, shareable, and indexable. SPA-style paging can layer on top app-side.

Changelog

Version history mentioning Pagination.

v0.1.0 — 2026-11-11

added

Navigation (7): Tabs, Breadcrumb, Pagination, Stepper, Tree, Navbar, Sidebar.