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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
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
Keep linear content flows, such as an article on one page whenever possible.
Indicate current and visited pages.
Don't
Do not break up linear content flow onto multiple pages when it can be shown on the same page.