Pagination

Page navigation.

A <nav> of real buttons, with aria-current="page" on the one you are on — the part that is usually missing, and the only way a screen reader user knows where they are in the list. The window of page numbers always shows the first and last page plus a span around the current one, with an ellipsis where numbers were dropped.

Navigation · two-way: bind:page

<script lang="ts">
	import { Pagination } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
page bind:	number	1	1-based.
count required	number	—	Total pages. Below 2 the component renders nothing.
siblings	number	1	Page numbers either side of the current one.
class	string	—	Merged with the component's own classes, last — so yours win.
aria-label	string	'Pagination'	Names the <nav>, so a screen reader can skip past it.
previousLabel	string	'Previous page'	Accessible name of the ← button. Localise here.
nextLabel	string	'Next page'	Accessible name of the → button. Localise here.
pageLabel	(page: number) => string	(n: number) => `Page ${n}`	Accessible name for a page button, e.g. n => Page ${n}. Localise here.
onPageChange	(page: number) => void	—	Fires with the new page, after clamping to 1…count.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Pagination page={6} count={20} />

Navigation · Tree · Tabs · CommandPalette · Kbd

---

← All components · Getting started · Theming · source