Navigation

Pagination

Moves between pages of a long list.

Installation

npx sinaui add pagination

Copy src/lib/ui/Pagination.svelte, glide.ts, Icon.svelte and tokens.css. No other dependencies.

Examples

Buttons

The marker glides to the page you pick. The row always holds the same number of items, so the buttons never jump out from under the pointer.

Showing page 1 of the Bayt al-Ḥikma catalog.

<script lang="ts">
	import Pagination from '#lib/ui/Pagination.svelte';

	let page = $state(1);
</script>

<Pagination bind:page count={24} label="Catalog pages" />
<p>Showing page {page} of the Bayt al-Ḥikma catalog.</p>

Links

With href, every page is a real link: it can be opened in a new tab, and it works before JavaScript loads.

<script lang="ts">
	import Pagination from '#lib/ui/Pagination.svelte';

	// Real links: each page has a URL, and it works before JavaScript loads.
	let page = $state(4);
</script>

<Pagination bind:page count={9} href={(p) => `?page=${p}#links`} label="Manuscript pages" />

A few pages

Every page shows when they fit.

<script lang="ts">
	import Pagination from '#lib/ui/Pagination.svelte';

	let page = $state(2);
</script>

<Pagination bind:page count={5} label="Volumes of the Canon" />

Props

Prop	Type	Default
`page`	`number`, bindable	`1`
`count`	`number` (required)
`siblings`	`number`	`1`
`href`	`(page) => string`	buttons
`label`	`string`	`'Pagination'`

Accessibility

A <nav> landmark with a list inside; the current page carries aria-current="page".
Page numbers are read as “Page 5”, not a bare number; the gaps (…) are hidden from screen readers.
Give each pagination its own label when a page has more than one.