Navigation

Pagination

Page navigation with first/last and ellipsis truncation.

stableNo JS requiredBuilt on <nav>hydrateless/pagination.css

Page navigation with first/last anchors and ellipsis truncation. It is a semantic <nav> wrapping a list of links. CSS-only.

Pagination

Live

• ‹
• 1
• 2
• …
• 9
• ›

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
page	number	—	Current page (1-based).
count	number	—	Total number of pages.
onPageChange	(page: number) => void	—	Fires when a page link is chosen.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Active page background.
--hl-surface-2	Hovered item background.
--hl-radius-md	Item corner radius.

Accessibility

• Label the <nav> with aria-label="Pagination".
• Mark the active page with aria-current="page"; give the arrows accessible labels.

Related

BreadcrumbBreadcrumb navigation using a semantic nav and list.TableA styled native <table> with striping and hover.