Pagination
Taxonomic name: PAGINATION
Beta v.1.0.0 - Updated 02/03/17.
The pagination control is used to split content over a number of pages, and guide users directly to a particular page or to the next or previous page.
- Include a title that describes how many page links are being displayed, and the overall number of links, eg. 'Showing 1 of 15'.
- Consider whether pagination is required - undertake user research activity to understand what an optimum page length would be for your content - it may be longer than you think as scrolling can be less onerous for users than navigating between pages, depending on the scenario.
- A maximum of 10 page number links should be displayed in large and medium views.
- A maximum of 5 page number links should be displayed in a small view.
- Don't use 'first' and 'last' links.
- Must not be used on dark accent colours.
Examples
Notes for developers
Must not be used on dark accent colours.
Notes for testers
- Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
- Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
- Ensure that when hovering over a link the style changes noticeably.
- Ensure that when a link has focus the style changes noticeably.
- There should be a clear visual distinction between the current page, a hover state for selectable pages, non-selected pages, and Previous and Next links. Do not use first and last links or chevrons.
- Show a maximum of 9 page links in a desktop or tablet view, or a maximum of 5 links for a mobile view.
Code Examples
Showing 1 of 15
Showing 8 of 15
Showing 15 of 15
<p class="u-text--center u-no-print">Showing 8 of 15</p>
<div class="pagination">
<ul class="pagination__list plain-list">
<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">4</a></li>
<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">5</a></li>
<li class="pagination__list-item pagination__list-item--primary"><a href="#example">6</a></li>
<li class="pagination__list-item pagination__list-item--primary"><a href="#example">7</a></li>
<li class="pagination__list-item pagination__list-item--primary pagination__list-item--selected"><span>8</span></li>
<li class="pagination__list-item pagination__list-item--primary"><a href="#example">9</a></li>
<li class="pagination__list-item pagination__list-item--primary"><a href="#example">10</a></li>
<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">11</a></li>
<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">12</a></li>
</ul>
<p class="pagination__previous"><a href="#example"><span>Previous</span></a></p>
<p class="pagination__next"><a href="#example"><span>Next</span></a></p>
</div>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.pagination |
Base style for pagination | Yes | div |
|
.pagination__list |
Base style for a pagination list | Yes | .pagination > .plain-list |
|
.pagination__list-item |
Base style for pagination list items | Yes | .pagination__list > li |
|
.pagination__list-item--primary |
Modifier to display this list item a all screen sizes | Yes | .pagination__list-item |
Maximum of 5 and must be all together. |
.pagination__list-item--secondary |
Modifier to display this list item at medium screen sizes or over | Yes | .pagination__list-item |
Maximum of 4. Can be either side of any primary items |
.pagination__list-item--selected |
Modifier for the currently open page. | Yes | .pagination__list-item--primary |
Must not contain a link |
.pagination__previous |
Base style for previous page arrow | Yes | .pagination__list ~ p |
Is not included if the currently selected page is the first page. |
.pagination__next |
Base style for next page arrow | Yes | .pagination__list ~ p |
Is not included if the currently selected page is the last page. |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant page.