Basic paginations

Customization

The pagination component is fully customizable, from the page numbers to the arrows.

Pagination with hrefs

The example shows the pagination component with hrefs provided for each page element.
The hrefs customization is based on pageLink input. This receives a custom function which computes the href using the received page number and the location hash. On the pageChange output event, the location hash is updated with the href of the current page element. This strategy permits navigations in current browser tab, and opening a page in new tabs using the customized href.

Accessibility

Pagination is a navigation element. The navigation (nav) elements need to have the aria-label attribute to differentiate them. Check the API section to learn about the default one set for our pagination. You need to customize the aria-label attribute if you have more than one pagination on your page. The aria-current="page" attribute is set to the current element as needed. Each pagination link item has its own aria-label that you can customize (for ScreenReader). Check the API section to know the default value set for each item.