Navigation
Pagination
Page navigation with first/last and ellipsis truncation.
Page navigation with first/last anchors and ellipsis truncation. It is a semantic <nav> wrapping a list of links, and server-rendered links work with no JavaScript. Add data-hl-pagination and the optional enhancer tracks the current page, disables the end controls, adds arrow-key navigation, and can render the whole control from a data-hl-total.
Pagination
This in-page preview updates with the enhancer. Use real page URLs for server-rendered navigation without JavaScript.
Enhanced
Mark each control with data-hl-page (a number, prev, or next). Hash links and buttons become in-page page changes; links with a real href keep navigating so the server can render the next page.
Rendered from a total
Leave the list empty and give the enhancer a data-hl-total; it renders numbered buttons with ellipses using the same range algorithm as the framework bindings and re-renders on every change.
JavaScript
This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:
import { enhancePagination } from '@hydrateless/enhancers/pagination';
const handle = enhancePagination(document);
// handle.api -> imperative controls
// handle.destroy() -> tear everything downProps
The framework bindings expose these props (and forward the rest to the root element).
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | Not set | Current page (1-based). |
count | number | Not set | Total number of pages. |
onPageChange | (page: number) => void | Not set | Fires when a page link is chosen (Vue: `v-model:page` / `update:page`). |
Events and callbacks
| Event / Callback | Payload | Description |
|---|---|---|
hl:change | { value: number } | Fires from an enhanced `<nav>` with the new page after every change (also the `onValueChange` callback). |
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>witharia-label="Pagination". - Mark the active page with
aria-current="page"; give the arrows accessible labels. - When enhanced, the numbered controls stay in the tab order and Left/Right (flipped in RTL), Home, and End move between them.