Pagination is the process of dividing information between multiple pages instead of showing it all on a single page; also the name usually given to the interface used for navigating between pages.
Component
Pagination
30 examples
Pagination
A11Y Style Guide
- Code examples
- Usage guidelines
- Accessibility
Pagination
Ant Design
Ant Financial
- Code examples
- Accessibility issues
Pagination
Atlassian Design System
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Pagination
Aurora
Government of Canada
- Code examples
- Tone of voice
Pagination
Barnardo’s Design System
- Code examples
- Research
- Usage guidelines
- Tone of voice
Pagination
Base Web
Uber
- Code examples
- Usage guidelines
Numbered pagination
BBC Global Experience Language
- Accessibility
- Usage guidelines
Pagination
Bolt Design System
- Tone of voice
- Code examples
Pagination
Bootstrap
- Accessibility
- Code examples
Pagination
Bulma
- Code examples
- Accessibility issues
Pagination
Carbon Design System
IBM
- Code examples
- Usage guidelines
Pagination
Cedar
Recreational Equipment, Inc.
- Usage guidelines
- Code examples
Pagination
eBay MIND Patterns
- Accessibility
- Usage guidelines
Pagination
Edison Design System
General Electric
- Usage guidelines
- Code examples
Pagination
Elastic UI framework
Elastic
- Code examples
Pagination
ICS Design System
IBM Collaboration Solutions
- Usage guidelines
- Accessibility
- Tone of voice
Pagination
Luna
Sainsbury’s
- Usage guidelines
- Code examples
- Tone of voice
Pagination
Momentum Design
Cisco
- Code examples
- Usage guidelines
Pagination
NHS Digital service manual
- Code examples
- Usage guidelines
- Research
- Tone of voice
Pagination
Polaris
Shopify
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
Pagination
Primer
GitHub
- Code examples
Pagination
Rizzo
Lonely Planet
Pagination
Royal Navy design system
- Usage guidelines
- Code examples
Pagination
Ruter Components
- Code examples
Pagination
Solid
Buzzfeed
- Code examples
- Usage guidelines
- Accessibility issues
Pagination
Spark Design System
Quicken Loans
- Usage guidelines
- Code examples
Pagination - Button Style
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Pagination - Explicit
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Pagination - Page
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Pagination
Stacks
Stack Overflow
- Code examples
- Usage guidelines
- Tone of voice
Description
The most basic form of pagination controls are simple 'next' and 'previous' buttons. More complex solutions may include links to specific page numbers and/or the first and last pages.
Markup
Here is example mark up for pagination on a blog article listing page. This example uses links to specific, numbered pages; the user is currently on /blog?p=2
, the second page of results:
<nav aria-label="Pagination">
<ul>
<li><a href="/blog">1</a></li>
<li aria-current="page">2</li>
<li><a href="/blog?p=3">3</a></li>
</ul>
</nav>
As pagination is a form of navigation it should be wrapped in a
<nav>
element. Important note: You may come across examples whererole="navigation"
is placed directly to theul
element itself (e.g. this example from the Yale UI Style Guide). This is incorrect as the navigation role overrides the list semantics of theul
as well as theli
items inside.1Add a meaningful label such as
aria-label="Pagination"
to the<nav>
element to differentiate it from other navigation landmarks (such as your main site navigation, or breadcrumbs).Add the
aria-current="page"
attribute to the list item which represents the current page. As clicking on a link to the current page would do nothing but trigger a page reload, it's common for the link to be excluded here.
You can enhance the experience for users of assistive technology further by adding an accessible label to each item. Two possible ways of doing this are:
By using the
aria-label
attributeBy including text which is visually hidden, but still gets announced by screen readers (in the following example, this is done using the class,
visually-hidden
).
<!-- Users of screen readers will hear "Page 2" -->
<li>
<a href="/blog?p=2" aria-label="Page 2">2</a>
</li>
<!-- Users of screen readers will hear "Current page, page 3" -->
<li aria-current="page">
<span class="visually-hidden">Current page, page </span>3
</li>