# Pagination Source: https://lumeo.nativ.sh/components/pagination # Pagination Navigation controls for paging through content. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo ## 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. Preview Code Default - Previous - 1 - 2 - 3 - 4 - 5 - Next Page 1 of 5 Preview Code Compact - Previous 1 / 20- Next Best for mobile — shows only Previous, a "page / total" label, and Next. Preview Code Size Size: Sm Md Lg - Previous - 1 - 2 - 3 - 4 - 5 - Next Control the size of pagination items via a custom class. Preview Code With Ellipsis - Previous - 1 - 2 - 3 - More pages - 8 - 9 - 10 - Next ## API Reference ### Pagination Prop Type Default Description ChildContent RenderFragment? null The pagination content. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? 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? 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? 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? 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? null Additional HTML attributes. ### PaginationEllipsis Prop Type Default Description Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ## Related Components - [DataTable](/components/data-table) — Full-featured data table with built-in pagination support - [Table](/components/table) — Simple table component to pair with Pagination for paged views - [Button](/components/button) — Standalone navigation buttons for simpler paging patterns