AppPagination
Standalone numbered pagination for lists, cards, or search results.
<app-pagination page="2" total-pages="5" href-template="?page={page}" />A standalone pagination nav for lists, cards, search results, or any content that spans multiple pages. <app-pagination> handles page selection without the table context — if you need a rows-per-page selector and row range, use <app-table-pagination> instead.
Renders nothing when total-pages <= 1 — a single-page result set has no pagination.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the pager above it. Clicking a page link also navigates here via query string, so it round-trips through the same real render.
Basic pagination
Give the current page, the total page count, and an href template — the pager renders previous and next links, plus a windowed set of numbered page links. Every link navigates by query string.
Show code
<app-pagination page="2" total-pages="5" href-template="?page={page}" />
{page} token that gets replaced with the page number, e.g. "?page={page}" or "/results?q=query&page={page}". The entire URL is encoded for safe HTML output.Large result sets with ellipsis
When the page count is large, the window shows the current page ± siblings, plus the first and last pages, with ellipsis filling the gap. Default siblings="1" shows current ± 1 page; adjust to change the window radius.
Show code
<app-pagination page="6" total-pages="20" href-template="?page={page}" />
Sizes
Use size="sm" for a compact layout in sidebars, card headers, or dense toolbars.
Show code
<app-pagination page="2" total-pages="5" size="sm" href-template="?page={page}" />
When to use
Use it when
- You have a list of items split across multiple pages.
- The user needs to move between pages via numbered links.
- You're paginating cards, search results, or any content outside a table.
Reach for something else when
- The list is short and fits on one screen. → no pager
- You're paging a table and need a rows-per-page selector. → AppTablePagination
- The user should keep scrolling instead of paging. → infinite scroll
Every option
The page-window/ellipsis behaviour at every edge — first, middle, last page — and across few vs. many pages, plus the siblings and size attributes.
position — first, middle, last (total-pages=20)
page="1" (first — Previous disabled, no left ellipsis)page="2" (near start — left run shows instead of ellipsis)page="10" (middle — ellipsis on both sides)page="19" (near end — right run shows instead of ellipsis)page="20" (last — Next disabled, no right ellipsis)total-pages — few vs. many pages
total-pages="1" (renders nothing)total-pages="3" (few pages — every page shown, no ellipsis)total-pages="7" (exactly fills the default window — no ellipsis)total-pages="8" (one page past the threshold — ellipsis appears)total-pages="50" (many pages — ellipsis both sides)siblings — window radius (page="10" of 20)
siblings="0"
siblings="1" (default)
siblings="2"
siblings="3"
size
size="sm"
size="md"
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| page | int | 1 | The current page, one-indexed. Marked with aria-current="page". |
| total-pages | int | 1 | Total page count. The pager renders nothing when total-pages <= 1. |
| href-template | string | - | Template string for page links. The {page} token is replaced with the page number, e.g. "?page={page}" or "/results?q=query&page={page}". The entire URL is encoded for safe HTML output. |
| siblings | int | 1 | Window radius — how many page buttons sit either side of the current page before an ellipsis appears. Default 1 shows current ± 1 page. |
| size | md | sm | md | Control size: "sm" for compact, "md" for standard. |
| aria-label | string | Pagination | Accessible label for the <nav> element. |