Skip to main content

Blazor Pagination

Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.


ActivePageNumberintActive page number. Starts with 1.1
AlignmentAlignmentGets or sets the pagination alignment.Alignment.None
DisplayPagesintGets or sets the maximum page links to be displayed.5
FirstLinkIconIconNameGets or sets first link icon.
FirstLinkTextstringGets or sets first link text. FirstLinkText is ignored if FirstLinkIcon is specified.First
LastLinkIconIconNameGets or sets last link icon.
LastLinkTextstringGets or sets last link text. LastLinkText is ignored if LastLinkIcon is specified.Last
NextLinkIconIconNameGets or sets next link icon.
NextLinkTextstringGets or sets next link text. NextLinkText is ignored if NextLinkIcon is specified.Next
PreviousLinkIconIconNameGets or sets previous link icon.
PreviousLinkTextstringGets or sets previous link text. PreviousLinkText is ignored if PreviousLinkIcon is specified.Previous
SizePaginationSizeGets or sets the pagination size.
TotalPagesintTotal pages of data items.

Callback Events

PageChangedThis event fires immediately when the page number is changed.



We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Pagination - Examples
<Pagination TotalPages="8" />
<Pagination TotalPages="10" />
<Pagination TotalPages="13" />
<Pagination TotalPages="25" />
<Pagination TotalPages="100" />

See demo here.

Working with icons

Pagination - Working with icons
<Pagination ActivePageNumber="1"
LastLinkIcon="IconName.ChevronDoubleRight" />

See demo here.

Disabled and active states

Pagination - Disabled and active states
<Pagination ActivePageNumber="1" TotalPages="10" />
<Pagination ActivePageNumber="3" TotalPages="10" />
<Pagination ActivePageNumber="5" TotalPages="10" />

See demo here.


Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.

Pagination - Sizing
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Small" />
<Pagination ActivePageNumber="5" TotalPages="5" />
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Large" />

See demo here.


Pagination - Alignment
<Pagination ActivePageNumber="2" TotalPages="5" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="Alignment.Center" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="Alignment.End" />

See demo here.

Callback Events

Pagination - Callback Events
<Pagination ActivePageNumber="@currentPageNumber"
PageChanged="OnPageChangedAsync" />

<text>Current Page Number: @currentPageNumber</text>
@code {
int currentPageNumber = 2;

private async Task OnPageChangedAsync(int newPageNumber)
await Task.Run(() => { currentPageNumber = newPageNumber; });

See demo here.