Pagination

When to use

• Search results. Pagination is most commonly used with paginated search results.
• Multi-page collections of related items. Splitting a large collection of related items into individual pages can improve browsability and scannability. Common examples of multi-page collections include blog articles, or archives.

When to consider something else 

• Meaningful page groupings. If you have long content split meaningfully, or grouped by subject or theme, use conventional navigation like side navigation.
• Steps in a sequence. 
• Short collections. If the length of the entire collection is less than 3-4 screen lengths long, consider showing all the items at once instead of paginating.

Usability guidance

• Show the size of the paginated set. Users want to know the length of a paginated section. This is most commonly accomplished by always showing the last page as the last item in the pagination navigation. 
• Highlight the current page. Pagination shows the current page the user is on in relation to the entire collection of pages.
• Always include the first, previous, and next pages. Users should always be able to navigate to each of these pages from any page in the set.
• Show navigation items in a single line. Pagination can be hard to understand — and individual items can be more difficult to select — when the items break over one line. Don’t split the navigation items over multiple lines. Avoid using Pagination in any context where it would be more than one line long.
• Indicate any missing pages. Don’t include out-of-sequence items directly adjacent to one another. Whenever there are pages missing — either between two elements, or at the end of an unbounded sequence — indicate the missing pages with an indicator like a non-selectable ellipsis.
• Use as few navigation items as possible. Showing more pages than necessary tends to add complexity and use more space without proportional increases to the component’s functionality. Focus on the essential actions and avoid adding more items to Pagination just to fill space.
• Use generous touch targets. Use touch targets that are big enough to select with any finger and have enough separation to avoid mistakes.
• Optimize the number of entries per page. Consider page load, performance, and the user’s scrolling preferences when determining how many items are displayed on each page. Some paginated content benefits from user control over the number of elements to show on each page.

Accessibility guidance - NEEDS CHECK

• Use the <nav> element. Use a wrapping <nav> element to identify Pagination as a navigation section to screen readers and other assistive technologies.
• Use a unique, descriptive ARIA label for the <nav> element. Provide a descriptive ARIA label for any Pagination component’s <nav> element that describes its purpose. For example, if the pagination component is used to navigate through a set of search results, an appropriate label could be aria-label="search results page". If you use more than one Pagination component on a page, each will need a unique ARIA label.
• Use an unordered list for the navigation items. This allows screen readers to voice the number of elements in the Pagination component
• Voice the current page. Use aria-current="page" on the current page’s link item to properly voice the current page for screen readers.
• Voice the word “page” before the page numbers in links. Use aria-label="page [#]" on each page link to be explicit that the numbers are links to page numbers.
• Voice “last page” on the last page’s link in a bounded set. Use aria-label="last page, page [#]" to voice that the last element in the navigation is the last page in the paginated section. Don’t include this on the last navigation element in an unbounded set, since there is no last page in an unbounded set.
• Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in your Pagination component, it makes sense to include this as a link so screen readers voice the current page whether the user navigates by element or by tabbing.
• Avoid large horizontal gaps between elements. Users with limited vision or mobility may stop scanning and miss an element if there’s too much horizontal space between it and the previous element in the reading order.