Pagination is a user interface pattern that divides content into separate pages. This component is helpful when you have a lot of content to display. For longer pages, place the pagination at the top and bottom of your list of items.
Pagination is good when the user is searching for something specific within the list of results. It also gives the user a sense of control. The numbered pages allows them to reference an item quicker too.
An alternative to pagination is a "Load more" button, where users only have to click one button to load the next set of results. With pagination, the list of results gets replaced whereas the "Load More" button adds to the list. Using the one button is ideal when users want to browse and compare items within a list.
Accessibility notes: Pages likely have more than one such navigation section. 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". Also, provide HTML for screenreaders to show the active/current page, such as
<li class="page-item active" aria-current="page"><span class="page-link">1<span class="sr-only">(current)</span></span></li>
Here is an example that has active and disabled states.
We recommend swapping out active or disabled anchors for <span> to remove click functionality and prevent keyboard focus while retaining intended styles.