Pagination
Navigation between pages of content
Divergence from Blok
Composable parts only — no built-in CurrentPage / TotalPages data-driven mode. Blok exports 7 separate components (Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis) and the consumer composes them. Compose the page numbers yourself (see examples below) or wrap the composable parts in your own helper component.
Additive: Click and Disabled parameters on links. Blok's PaginationLink takes only href (URL navigation). Our PaginationLink additionally accepts a Blazor EventCallback Click (renders a <button>) and a Disabled flag — natural for SPA-style pagination with no URL changes.
Examples
Default
Page 1 of 10
With href links (URL navigation)
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Pagination | Root <nav aria-label="pagination"> wrapper. Contains a single PaginationContent list. |
| PaginationContent | Horizontal <ul> holding the PaginationItems. Place inside a Pagination. |
| PaginationItem | Wrapper <li> for a single pagination control — typically a PaginationLink, PaginationPrevious, PaginationNext, or PaginationEllipsis. |
| PaginationLink | Clickable page number. Renders as an <a href> when Href is set (URL navigation) or a <button> with Click otherwise (SPA-style). Highlights itself when IsActive is true. |
| PaginationPrevious | Convenience wrapper around PaginationLink that renders a left-chevron glyph and aria-label="Go to previous page". |
| PaginationNext | Convenience wrapper around PaginationLink that renders a right-chevron glyph and aria-label="Go to next page". |
| PaginationEllipsis | Decorative … placeholder used when the page list is truncated. Marked aria-hidden with a visually-hidden "More pages" label. |
Pagination
Root <nav aria-label="pagination"> wrapper. Contains a single PaginationContent list.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <nav>. | |
| ChildContent | RenderFragment? | Should contain a single PaginationContent. |
PaginationContent
Horizontal <ul> holding the PaginationItems. Place inside a Pagination.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <ul>. | |
| ChildContent | RenderFragment? | One or more PaginationItem children. |
PaginationItem
Wrapper <li> for a single pagination control — typically a PaginationLink, PaginationPrevious, PaginationNext, or PaginationEllipsis.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <li>. | |
| ChildContent | RenderFragment? | A single pagination control. |
PaginationLink
Clickable page number. Renders as an <a href> when Href is set (URL navigation) or a <button> with Click otherwise (SPA-style). Highlights itself when IsActive is true.
| Property | Type | Required | Description |
|---|---|---|---|
| Href | string? | URL for link mode. When set, the control renders as an <a>. | |
| Click | EventCallback | Invoked on button-mode click. Used when Href is not supplied. Additional to Blok. | |
| IsActive | bool | Marks this link as the current page. Emits aria-current="page" and applies the active styling. Default: false. | |
| Disabled | bool | When true in button mode, disables the control. Additional to Blok. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the control. | |
| ChildContent | RenderFragment? | Link contents — usually a page number or icon. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the control. |
PaginationPrevious
Convenience wrapper around PaginationLink that renders a left-chevron glyph and aria-label="Go to previous page".
| Property | Type | Required | Description |
|---|---|---|---|
| Href | string? | URL for link mode. When set, the control renders as an <a>. | |
| Click | EventCallback | Invoked on button-mode click. | |
| Disabled | bool | When true in button mode, disables the control. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the control. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the control. |
PaginationNext
Convenience wrapper around PaginationLink that renders a right-chevron glyph and aria-label="Go to next page".
| Property | Type | Required | Description |
|---|---|---|---|
| Href | string? | URL for link mode. When set, the control renders as an <a>. | |
| Click | EventCallback | Invoked on button-mode click. | |
| Disabled | bool | When true in button mode, disables the control. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the control. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the control. |
PaginationEllipsis
Decorative … placeholder used when the page list is truncated. Marked aria-hidden with a visually-hidden "More pages" label.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the ellipsis container. |