Pagination
Sample HTML
<nav class="ds_pagination" aria-label="Search result pages">
<ul class="ds_pagination__list">
<li class="ds_pagination__item">
<a aria-label="Page 1" aria-current="page" class="ds_pagination__link ds_current" href="#">
<span class="ds_pagination__link-label">1</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 2" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">2</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 3" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">3</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 4" 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">…</span>
</li>
<li class="ds_pagination__item">
<a aria-label="Last page, page 27" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">27</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Next page" 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 pages of items. 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. 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.
Sample HTML
<nav class="ds_pagination" aria-label="Search result pages">
<ul class="ds_pagination__list">
<li class="ds_pagination__item">
<a aria-label="Previous page" 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 aria-label="Page 1" 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">…</span>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 13" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">13</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 14" aria-current="page" class="ds_pagination__link ds_current" href="#">
<span class="ds_pagination__link-label">14</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 15" 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">…</span>
</li>
<li class="ds_pagination__item">
<a aria-label="Last page, page 27" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">27</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Next page" 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>The previous and next links only show the chevron icons on small screens. This helps to prevent pagination wrapping over more than one line.
Use the sequential navigation component when you expect users to read pages in order. The sequential navigation component only has links to the previous and next pages. This will reduce the cognitive load for your users.
Do not use 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, you can track clicks on links in pagination through the click URL, the click text and a data attribute showing the interaction.
The Design System’s ‘tracking’ script adds the data attributes.
There is additional information on tracking in the search results pattern’s website analytics section.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback