Pagination

Pagination enables finding, saving and using when a list of similar elements is too long to be easily displayed on one page. It allows users to get to specific content without being overwhelmed by a mass of data on one page.

Pagination is the process of splitting the contents of a website, or section of contents from a website, into discrete pages. It provides predefined number of results shown on a page and navigational links for users to advance to the next or previous page, the beginning or end of the page, or to an arbitrary page.


Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Navigation

Demo

Configure: select the dropdowns below to display the variety of options that pagination supports.


Code


				
			

Responsive preview

Usage best practices

Since users prefer to view all options on the same page, rather than clicking from page to page, therefore, pagination is best for lengthy listings of similar items as seen on ecommerce product listing page, news article archive, search engine results etc. It's primary purpose is to serve as an improved navigation, it is supposed to make it clear to users where they are, where they’ve already been and where they can go next. 

Consider using pagination when:

  • content and listings are long, such as ecommerce product listing, search engine results, article archives, photo galleries
  • user's goal is to find a specific item and click through to that destination page instead of perusing a full list

When using pagination, consider the following:

  • prioritize the list items based on target user group
  • divide the overall dataset into smaller groups of items, aiming to strike a good balance between content, legibility, and ease of navigation
  • change colour of the link number after the user has visited a page

Pagination examples:

  • card set
  • image gallery

Do

Do

Keep linear content flows, such as an article on one page whenever possible.

Do

Indicate current and visited pages.

Don't

Don't

Do not break up linear content flow onto multiple pages when it can be shown on the same page.