Pagination
Navigation controls for paging through content.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Pagination />
When to Use
- Paginated lists where data is split across multiple pages
- Search results with many items that benefit from page-by-page navigation
- Table navigation when rows exceed a single view
- Any content set too large to display at once that requires discrete page controls
Mobile tip
On narrow screens (375 px and below), long page ranges can overflow. Use the Compact pattern (Previous / page-count label / Next) or reduce the number of visible page items to keep the control within the viewport. The demos below all scroll horizontally if they overflow.
Page 1 of 5
Best for mobile — shows only Previous, a "page / total" label, and Next.
Size:
Control the size of pagination items via a custom class.
API Reference
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The pagination content. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
PaginationContent
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The pagination items, previous/next buttons, and ellipsis. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
PaginationItem
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The page number or label content. |
| IsActive | bool | false | Highlights the item as the current page. |
| OnClick | EventCallback | - | Callback invoked when the page item is clicked. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
PaginationPrevious
| Prop | Type | Default | Description |
|---|---|---|---|
| OnClick | EventCallback | - | Callback invoked when clicked. |
| Disabled | bool | false | Disables the previous button. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
PaginationNext
| Prop | Type | Default | Description |
|---|---|---|---|
| OnClick | EventCallback | - | Callback invoked when clicked. |
| Disabled | bool | false | Disables the next button. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
PaginationEllipsis
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |