# Pagination > Links to pages in a nav with aria-current="page"; the application owns the page number. Page: https://svelte-lean.vercel.app/primitives/pagination · Markdown: https://svelte-lean.vercel.app/primitives/pagination.md · Index: https://svelte-lean.vercel.app/llms.txt Links to the pages of a result set in a named navigation landmark, for lists whose pages each have their own URL. ```svelte ``` The links change this page’s query string and the example follows it; without JavaScript each link loads its page. ## Examples ### Ends of the range ```svelte ``` An a without href is not a link: Tab skips it and the stylesheet mutes it in place. ### Many pages ```svelte ``` ### Result summary ```svelte

Showing {(current - 1) * size + 1}–{Math.min(current * size, count)} of {count} orders

``` ## Usage Plain markup with a stylesheet: install `@svelte-lean/styles`. No JavaScript runs. ```bash npm install @svelte-lean/styles ``` `stylesheets` ```ts import '@svelte-lean/styles/pagination.css'; ``` Render one link per listed page with `href`, `aria-current="page"` on the current one, `data-slean-part="previous"` and `"next"` around them, and an `aria-hidden` ellipsis item where pages are skipped. Which pages to list is the application’s decision: the helper below keeps the first and last page and one page on each side of the current one; it is not part of any package. A table that pages in place has its own pagination (see the table’s Pagination page). `pagination-items.ts` ```ts /** * The items of a pagination: page numbers around `current`, the first and the last page, and * `null` where pages are skipped. A gap of one page shows that page instead of an ellipsis. * An application helper for /primitives/pagination, shown on the page as source; it is not part * of any package. */ export function pageItems(current: number, total: number, around = 1): (number | null)[] { const pages = new Set([1, total]); for (let page = current - around; page <= current + around; page++) { if (page >= 1 && page <= total) pages.add(page); } const items: (number | null)[] = []; for (const page of [...pages].sort((a, b) => a - b)) { const last = items.at(-1); if (typeof last === 'number' && page - last === 2) items.push(last + 1); else if (typeof last === 'number' && page - last > 2) items.push(null); items.push(page); } return items; } ``` ## Anatomy | Part | Element | data-slean-part | Required | Notes | | --- | --- | --- | --- | --- | | root | `