You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Components

Pagination

Published 5 July 2022
Pagination helps users navigate through large groups of content that are separated into pages.
Open this example in a new window

Sample HTML 

<nav class="ds_pagination" aria-label="Search result pages">
    <ul class="ds_pagination__list">
        <li class="ds_pagination__item" aria-current="page">
            <span class="ds_pagination__link  ds_current">1</span>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">2</span>
            </a>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">3</span>
            </a>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">4</span>
            </a>
        </li>
        <li class="ds_pagination__item" aria-hidden="true">
            <span class="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">27</span>
            </a>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href="#">
                <span class="ds_pagination__link-label">Next</span>
                <svg class="ds_icon" aria-hidden="true" role="img">
                    <use href="/assets/images/icons/icons.stack.svg#chevron_right"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>

About this component

The pagination component is a group of links to navigate through a set of content that is divided into pages. For example, a search results page.

There are links to specific pages in the set and links to pages in the set relative to the user’s current position. For example, the previous page and the next page.

This method of navigation is most effective when the user’s goal is to find a specific content item in the set, because the user can navigate directly to a specific page of the results.

Usage

If there are more pages in the set than are on display, the pagination component indicates that there are more pages with an ellipsis. This helps to prevent the pagination links wrapping over more than one row.

The first and last pages are always included. Including the first page makes it easy for the user to go to the beginning of the list. Including the last page makes it easy for the user to understand how many pages there are.

Open this example in a new window

Sample HTML 

<nav class="ds_pagination" aria-label="Search result pages">
    <ul class="ds_pagination__list">
        <li class="ds_pagination__item">
            <a class="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href="#">
                <svg class="ds_icon" aria-hidden="true" role="img">
                    <use href="/assets/images/icons/icons.stack.svg#chevron_left"></use>
                </svg>
                <span class="ds_pagination__link-label">Previous</span>
            </a>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">1</span>
            </a>
        </li>
        <li class="ds_pagination__item" aria-hidden="true">
            <span class="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">13</span>
            </a>
        </li>
        <li class="ds_pagination__item" aria-current="page">
            <span class="ds_pagination__link  ds_current">14</span>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">15</span>
            </a>
        </li>
        <li class="ds_pagination__item" aria-hidden="true">
            <span class="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link" href="#">
                <span class="ds_pagination__link-label">27</span>
            </a>
        </li>
        <li class="ds_pagination__item">
            <a class="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href="#">
                <span class="ds_pagination__link-label">Next</span>
                <svg class="ds_icon" aria-hidden="true" role="img">
                    <use href="/assets/images/icons/icons.stack.svg#chevron_right"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>

To help prevent pagination wrapping over multiple rows on small screens, the previous and next links show only the chevron icons at smaller viewport sizes.

If you expect users to navigate through the results in sequential order then the pagination component may cause unnecessary cognitive load. Consider using the sequential navigation component instead, which only has links to the previous page and the next page.

Avoid using the pagination component as a way to navigate between pages that are not part of a single related group.

Why we use this component

The pagination component is a compact way of letting your users to more quickly navigate a large group of content items that you’ve divided into pages.

Related components

Website analytics

To understand user behaviour, clicks on links in pagination can be tracked through the click URL, the click text and a data attribute showing the interaction.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

There is additional information on tracking in the search results pattern’s website analytics section.

Back to top