Components menu
Pagination
Help users navigate forwards and backwards through a series of pages.
About this component
The pagination component is a group of links to navigate through pages of items. This method of navigation is most effective when the user’s goal is to find a specific content item in the set. The user can navigate directly to a specific page of the results.
When to use this component
Consider using pagination when:
- showing all the content on a single page makes the page take too long to load
- most users will only need the content on the first page or first few pages
When not to use this component
Only break up content onto separate pages if it improves the performance or usability of your service.
Avoid using the ‘infinite scroll’ technique to automatically load content when the user approaches the bottom of the page. This causes problems for keyboard users.
Do not use this Pagination component for linear journeys – for example, where you’re asking the user to complete a form. Instead, use the Button component (usually a continue and back button) to let the user move to the next page and back.
How it works
Add the pagination component after the content on each page that you’re paginating.
Do not show pagination if there’s only one page of content.
Redirect users to the first page if they enter a URL of a page that no longer exists.
For navigating between content pages
Use the ‘block’ style of pagination to let users navigate through related content that has been split across multiple pages. Stack the links vertically, so they’re more obvious to screen magnifier users when they’re zoomed in.
You can use link labels to give context on what the neighbouring pages are about.
HTML
<nav class="" role="navigation" aria-label="Pagination Search results pages">
<ul class="pagination flex-wrap">
<li class="page-item">
<a class="page-link" href="#" aria-label="Goto Previous Page">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" ></path>
</svg>
</span>
PREV
<span class="visually-hidden"> page </span>
</a>
</li>
<li class="page-item">
<span class="page-link active" aria-label="Current Page, Page 1" aria-current="page">
1 <span class="visually-hidden"> (current) </span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Goto Page 2"> 2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Goto Page 3"> 3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Goto Page 4"> 4 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Goto Page 5"> 5 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Goto Next Page">
NEXT
<span class="visually-hidden"> page </span>
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
</svg>
</span>
</a>
</li>
</ul>
</nav>
CSS
/* Pagination
------------------------------------ */
.page-link {
color: #000000;
text-decoration: none;
background-color: #ffffff;
border: 0px solid #ffffff;
}
.page-link:hover {
z-index: 2;
color: #ffffff;
background-color: var(--scottish-teal);
border-color: 0px solid #ffffff;
}
.page-link.active, .active > .page-link {
z-index: 3;
color: #000000;
background-color: var(--grey-three);
border-color: 0px solid #ffffff;
}
.page-link:focus {
z-index: 3;
color: #000000;
background-color: var(--verdant-green);
outline: 0;
box-shadow: none;
}