# nord-pagination > Pagination is the navigation root for a paginated collection. It is > composition-first: it owns no page state, renders no controls, and emits no > events. Your app owns the page state, URL/query syncing, cursors and any data > fetching; Nord supplies the semantic/layout primitives, the styling and the > paginate() math utility for building the page window. > > As a root it is a navigation landmark — it sets role="navigation" and a > default accessible label so screen-reader users can jump to it. Compose the > lower-level primitives inside it: > > - Pagination Content — the list row. > - Pagination Item — a slot in the row. > - Pagination Link — a page link (set current). > - Pagination Previous — the previous control. > - Pagination Next — the next control. > - Pagination Ellipsis — the collapsed-pages marker. > > Bring your own interactive element — an <a> (e.g. a framework <Link> / > <NuxtLink>) or a nord-button — and own its href, navigation and > disabled state. See the framework adapters in the docs. ## Usage Pagination is the navigation root for moving through a paginated collection. It is **composition-first**: it owns no page state, renders no controls, and emits no events. Your app owns the page state, URLs, cursors and any data fetching; Nord supplies the semantic/layout primitives, the styling, and the `paginate()` math utility for building the page window. ```js import '@nordhealth/components/lib/Pagination' ``` Compose the primitives inside it, bringing your own interactive element — an `` (e.g. a framework `` / `` for crawlable, SSR-friendly links) or a `nord-button`. You own each link's `href`, navigation and `disabled` state. Mark the active page with `current` on the `nord-pagination-link` and it mirrors `aria-current="page"` onto your link. ```html

``` The root sets `role="navigation"` and a default accessible label, so you don't need to wrap it in a `

`. It renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities. ### Building the page window For numbered pages with known totals, the `paginate()` utility returns the sequence of page numbers (and ellipsis markers) to render, keeping the window centred on the current page: ```js import { paginate } from '@nordhealth/components' paginate(currentPage, pageCount) // → [1, "…", 4, 5, 6, "…", 50] ``` Map the tokens to `nord-pagination-link` / `nord-pagination-ellipsis` yourself — see the docs page for Next.js, Nuxt and TanStack adapters. > **Do:** - Treat your app as the source of truth: own page state, URLs and cursors, and supply the links. - Use `paginate()` to compute the numbered page window for known totals. - Set `current` on the active `nord-pagination-link` so it announces as the current page. - For icon-only previous/next, put a `nord-visually-hidden` label inside the `nord-button`. > **Don't:** - Don't expect it to render controls or change page on its own — you supply the markup. - Don't put an `aria-label` on a `nord-button` host; use a `nord-visually-hidden` child instead. - Don't add a second `

` around the root — it is already a navigation landmark. ## Examples ### Overview ```html

Showing 1–10 of 248

``` ### Numbered ```html

``` ### Simple ```html

``` ### Icons Only ```html

``` ### Cursor ```html

``` ### Rtl ```html

``` ## API Reference ### Properties - **loading** (`boolean`, default: `false`) — Dims the pagination and disables interaction while results are loading. ### Slots - **(default)** — Default slot for the composed pagination primitives. ### CSS Custom Properties - `--n-pagination-gap` (default: `var(--n-space-xs)`) — Controls the spacing between pagination controls.