Pagination
Use pagination for long lists of similar content, such as for search results or notifications. Pagination should always be rendered by the server, and never in the browser. Using pagination for tabular data should be deprecated.
Guidance
- Consider user needs. There are instances where pagination could be a hinderance despite page length.
- If the user is either on the first or last page, the corresponding bookend links are to be disabled.
-
No matter how many pages are in a set, never use more than seven numeric buttons. If there are more than seven pages in a set, the
ellipsesis to be used. If the pagination is placed in a narrower page section, use five. Note: further testing might set the number of pages to navigate to at five rather than seven depending on design stress points.- If the user is at the beginning, the pattern is to be [1][2][3][4][5][6][…][100].
- If user is at the end of the set, the pattern is to be [1][…][95][96][97][98][99][100].
- Otherwise, the pattern is to be [1][…][13][14][15][16][17][…][100]. The current page must be in the middle.
- Make the browser narrow to see how the design adapts to mobile layouts.
Accessibility
Use the aria attributes in the example below. The aria-label attribute provides additional context to non-visual users.
Example
Please note the bordered container boxes are not part of the component.
Note: paths to SVG sprite may vary.
<nav class="sba-c-pagination" role="navigation">
<div class="sba-c-pagination__forwards">
<a href="#" class="sba-c-pagination__link" aria-label="Next">
<svg aria-hidden="true" class="sba-c-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#angle-right"></use>
</svg>
</a>
<a href="#" class="sba-c-pagination__link sba-c-pagination__link--end">
<svg aria-hidden="true" class="sba-c-icon" aria-label="Last page">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#angle-double-right"></use>
</svg>
</a>
</div>
<div class="sba-c-pagination__backwards">
<a href="#" class="sba-c-pagination__link sba-c-pagination__link--disabled sba-c-pagination__link--end" aria-label="First page" aria-disabled="true">
<svg aria-hidden="true" class="sba-c-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#angle-double-left"></use>
</svg>
</a>
<a href="#" class="sba-c-pagination__link sba-c-pagination__link--disabled" aria-label="Back" aria-disabled="true">
<svg aria-hidden="true" class="sba-c-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#angle-left"></use>
</svg>
</a>
</div>
<div class="sba-c-pagination__numbers">
<div class="sba-c-pagination__status" aria-label="Currently on page 1 of 20">1 of 20</div>
<div class="sba-c-pagination__link sba-c-pagination__link--current" aria-current="page" aria-label="Page 1 (current page)">1</div>
<a href="#" class="sba-c-pagination__link" aria-label="Page 2">2</a>
<a href="#" class="sba-c-pagination__link" aria-label="Page 3">3</a>
<a href="#" class="sba-c-pagination__link" aria-label="Page 4">4</a>
<a href="#" class="sba-c-pagination__link" aria-label="Page 5">5</a>
<a href="#" class="sba-c-pagination__link" aria-label="Page 6">6</a>
<div class="sba-c-pagination__link sba-c-pagination__link--ellipses" aria-label="Skip pages">…</div>
<a href="#" class="sba-c-pagination__link" aria-label="Page 20">20</a>
</div>
</nav>