Pagination

How to use pagination

Pagination is typically used in product listing or search results pages. They tell users how many pages of results have been found and allow users to navigate back and forth between them.

When using pagination:

• Make sure pagination is only used for lists with more than 25 items
• Use aria-live regions to tell screen reader users about dynamic changes in content that don’t trigger a full page refresh
• Always place it at the bottom of the page
• Use the landmark <nav> region with an appropriate aria-label to make the component more accessible to screen reader users
• This component uses buttons and not links and is therefore most accessible when triggering dynamic content changes as opposed to navigating to a new page

Pagination is an effective way to help users navigate a long list whilst maintaining a sense of where they are. But alternative solutions like a 'load more' pattern may encourage users to browse more, particularly on a mobile.

Types of pagination

Standard pagination

This type of pagination allows users to skip multiple pages at a time rather than one by one.

() => {
  const [currentPage, setCurrentPage] = React.useState(1)

  return (
    <div class="ln-u-text-align-center">
      <Pagination
        showFirstAndLast
        showPages
        current={currentPage}
        total={12}
        onChange={(page, e) => {
          e.preventDefault()
          setCurrentPage(page)
        }}
      />
    </div>
  )
}

Compact pagination

This variant of pagination can be used when space is limited.

() => {
  const [currentPage, setCurrentPage] = React.useState(1)

  return (
    <div class="ln-u-text-align-center">
      <Pagination
        showFirstAndLast
        current={currentPage}
        total={12}
        onChange={(page, e) => {
          e.preventDefault()
          setCurrentPage(page)
        }}
        createHref={(page) => `/${page}`}
      />
    </div>
  )
}

Copy guidelines

Use ‘Next’ and ‘Previous’ as navigation labels.

Was this page helpful?