Pagination Design Component from Shipfaster UI Design Systems

Shipfaster: UI Components

Pagination

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

When to use

To enable users to focus on a few items at a time.
For showing the complete list of pages the user can visit.
To let user jump to any page in the list quickly and easily.

Anatomy

Page Label: Optionally add page labels along with left/right chevron icons to indicate navigation.
Page count: Indicates the page count of the specific page.
Active Page: Indicated which page is currently set active.

Best Practices

Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.
Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data. Provide an inline select in which users can choose the page they wish to navigate to.
Use an inline select within the pagination bar so the user can change the amount of data displayed per page.