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.
Page 7 of 20
Pass Page + TotalPages (or TotalItems + PageSize) and the pager renders prev/next, boundary, sibling pages and ellipsis automatically.
SiblingCount widens the band around the current page; BoundaryCount keeps more pages pinned at each end.