Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
UsageNg Pagination
Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".
<nav aria-label="Page navigation example">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow"><a class="Page-link">Prev</a></li>
<li class="Page-item" *ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i"></a>
</li>
<li class="Page-arrow"><a class="Page-link">Next</a></li>
</ul>
</nav>
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.
Html Symbol
Fa Icon
<nav aria-label="Page navigation example">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow">
<a class="Page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="Page-item" *ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i"></a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<p>Fa Icon</p>
<nav aria-label="Page navigation example">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow">
<a class="Page-link" aria-label="Previous">
<span aria-hidden="true"><i class="fa-solid fa-angle-double-left"></i></span>
</a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Previous">
<span aria-hidden="true"><i class="fa-solid fa-angle-left"></i></span>
</a>
</li>
<li class="Page-item" *ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i"></a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Next">
<span aria-hidden="true"><i class="fa-solid fa-angle-right"></i></span>
</a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Next">
<span aria-hidden="true"><i class="fa-solid fa-angle-double-right"></i></span>
</a>
</li>
</ul>
</nav>
Pagination links are customizable for different circumstances. Use .Disabled for links that appear un-clickable and .Active to indicate the current page.
While the .Disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.
<nav aria-label="Page navigation example">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow Disabled"><a class="Page-link">Prev</a></li>
<li class="Page-item"
[class.Active]="i==1" [attr.aria-current]="i==1?'page':null"
*ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i">
<span *ngIf="i==1" class="Visually-hidden">(current)</span>
</a>
</li>
<li class="Page-arrow"><a class="Page-link">Next</a></li>
</ul>
</nav>
Fancy larger or smaller pagination? Add .Pagination-lg or .Pagination-sm for additional sizes.
<!--Large-->
<nav aria-label="Page navigation example">
<ul class="Pagination Pagination-lg Justify-content-center MY-2">
<li class="Page-item"
[class.Active]="i==1" [attr.aria-current]="i==1?'page':null"
*ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i">
<span *ngIf="i==1" class="Visually-hidden">(current)</span>
</a>
</li>
</ul>
</nav>
<!--Small-->
<nav aria-label="Page navigation example">
<ul class="Pagination Pagination-sm Justify-content-center MY-2">
<li class="Page-item"
[class.Active]="i==1" [attr.aria-current]="i==1?'page':null"
*ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i">
<span *ngIf="i==1" class="Visually-hidden">(current)</span>
</a>
</li>
</ul>
</nav>
Add .Pagination-circle class to change the shape to a circle.
<nav aria-label="Page navigation example">
<ul class="Pagination Pagination-circle Justify-content-center MY-2">
<li class="Page-arrow">
<a class="Page-link" aria-label="Previous">
<span aria-hidden="true"><i class="fa-solid fa-angle-double-left"></i></span>
</a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Previous">
<span aria-hidden="true"><i class="fa-solid fa-angle-left"></i></span>
</a>
</li>
<li class="Page-item" [class.Active]="i==1" [attr.aria-current]="i==1?'page':null"
*ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i">
<span *ngIf="i==1" class="Visually-hidden">(current)</span>
</a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Next">
<span aria-hidden="true"><i class="fa-solid fa-angle-right"></i></span>
</a>
</li>
<li class="Page-arrow">
<a class="Page-link" aria-label="Next">
<span aria-hidden="true"><i class="fa-solid fa-angle-double-right"></i></span>
</a>
</li>
</ul>
</nav>
Change the alignment of pagination components with flexbox utilities.
Use .Justify-content-center class to center the pagination.
<nav aria-label="Page navigation example">
<ul class="Pagination Pagination-circle Justify-content-center MY-2">
<li class="Page-arrow Disabled"><a class="Page-link">Prev</a></li>
<li class="Page-item" *ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i"></a>
</li>
<li class="Page-arrow"><a class="Page-link">Next</a></li>
</ul>
</nav>
Use .Justify-content-end class to align the pagination to the right.
<nav aria-label="Page navigation example">
<ul class="Pagination Pagination-circle Justify-content-end MY-2">
<li class="Page-arrow Disabled"><a class="Page-link">Prev</a></li>
<li class="Page-item" *ngFor="let i of [1,2,3,4,5]">
<a class="Page-link" [innerHtml]="i"></a>
</li>
<li class="Page-arrow"><a class="Page-link">Next</a></li>
</ul>
</nav>