Pagination

The pagination component helps users navigate through content split across multiple pages. It displays page numbers and navigation controls, allowing users to move sequentially or jump to specific pages.

Use pagination when displaying lists of content, and listing every item on one page would overwhelm users or significantly impact page performance. This is usually when the list is over 10 to 20 items.

Use pagination when you need to:

• display search results with more than 20 items
• present large directories or lists that would be difficult to scan on one page
• show chronological content like news, events, or archived documents
• navigate through filtered or sorted lists
• browse collections of documents, reports, or records
• display user-generated content in manageable chunks
• provide access to historical records or time-series data

Don’t use pagination when other approaches better serve user needs.

Use step by step navigation instead when:

• content is sequential and users should follow a specific order
• you’re guiding users through a process or procedure

Use tabs instead when:

• content can be logically grouped into distinct categories
• users need to compare information across different sections

Use single-page display instead when:

• you have fewer than 20 items to show
• users need to see all items to make comparisons
• content would be more useful as a complete reference

Use ‘Previous’ and ‘Next’ rather than directional arrows alone, and make sure the first page, current page and final page are visible on all pages.