Components/

Pagination

Pagination, CdrPagination

Allows users to navigate to next or previous page when content is split into several pages

Live code examples for CdrPagination can be found on CodeSandbox.

Pagination @ SM, MD, LG

At the SM, MD, and LG breakpoints, pagination displays as a list of number text links with Prev and Next links when applicable.

Image showing full-sized pagination component

Pagination @ XS

At the XS breakpoint, pagination adapts to a Select component using the native UI dropdown menu.

Image showing responsive pagination component using Select element

Degraded Pagination

For use when only prev and next data is available.

Image showing pagination with only previous and next data available

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

Wrap the pagination links in a <nav> element to let screen readers recognize the pagination controls
Inlcude role=navigation if the pagination component is not wrapped in a <nav>
Add aria-label="pagination" to describe the type of navigation
Indicate the active page by adding aria-current="page" to the link that points to the current page
View these videos at a11ymattters, Accessible Pagination. They demonstrate before and after pagination tests using a screen reader voiceover

This component has compliance WCAG guidelines by:

WCAG 2.4.8: Information about the user's location within a set of Web pages is available
WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
WCAG 2.4.7: Focus is visible
WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them

Use When

Providing navigation to break apart large quantities of content
Breaking up search result pages into manageable sections

Don't Use When

Using lazy load or infinite scroll within an experience
Switching between slides or content in a carousel
Displaying editorial content. Instead, show entire article on one page

Foundation

Within pagination, link styles are adapted

Text links are displayed as $text-color-primary-on-dark
Prev and Next links use the small size for the caret-left and caret-right icons

Behavior

Page number links are truncated as follows: [first] ... [current-1] [current] [current+1] ... [last]
If there are 7 pages or fewer, all page number links will be shown
Prev or Next text links are removed when the first or last page are active

Do / Don't

By default, pagination is center aligned under category or search results content.

Image showing center-aligned pagination — Do

Image showing right-aligned pagination — Don't

The primary placement for pagination is at the bottom of a page that displays rows of content.

Image showing pagination at bottom of page below search results — Do

Image showing pagination above search results — Don't

Use pagination logic to truncate link list, when possible.

Image showing pagination page number truncation — Do

Image showing pagination with all page numbers — Don't

Responsiveness

Pagination adapts to a Select component with a native UI dropdown menu on XS breakpoints to provide a mobile-friendly experience.

Props

pages

name

array

type

N/A

default

Array of objects containing pagination data. Objects have structure of { page: number, url: string }. Required.

totalPages

name

number

type

null

default

Sets the total number of pages for displaying "Page x of <totalPages>". Sometimes the total number of pages is different than total page data objects in the pages array. For example, if only the next and previous pages are provided.

Events

change

name

pageNumber, event

arguments

$emit event fired when page changes based on user interaction by clicking a link or selecting an option from the select on mobile.

select-change

name

pageUrl, event

arguments

$emit event fired on select change with the URL value of the selected option. Also triggers the 'change' event (above) with the selected page number.

Usage

The CdrPagination component provides a current page number control and renders a list of links. The current page value should be bound using v-model in your app.

You will need to enable navigation manually for pagination to work at mobile widths (see below).

The CdrPagination component does not make data calls, render or track paginated data, or handle routing beyond simple anchor links. However, it does emit events if you need to customize routing or need to add additional application logic. See section below, "Usage with Vue Router".

The responsive behavior for the CdrPagination component automatically converts to CdrSelect component rather than a list of links. Values for the CdrSelect component are the provided page URL.

If not using Vue Router (see "Usage with Vue Router" below) you will need to manually update window location by using the select-change event.

<template>
  ...
     <cdr-pagination
       :pages="pageData"
       :total-pages="pageData.length"
       v-model="ex1Page"
       @select-change="selectNavigate"      
     />
  ...
</template>

<script>
import { CdrPagination } from '@rei/cedar';
export default {
  ...
  components: {
     CdrPagination  
  },
  data() {
    Return {
      ex1Page: 1,
      pageData: [
        { page: 1, url: 'https://www.rei.com/search?page=1' },
        { page: 2, url: 'https://www.rei.com/search?page=2' },
        { page: 3, url: 'https://www.rei.com/search?page=3' }
      ]
    };
  },
  methods: {
    selectNavigate(url, e) {
      window.location = url;
    },
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

SEO

For best SEO support, use of pagination requires additional markup and logic in the <head> of the page.

See REI's SEO Confluence page on pagination for information on implementing this correctly on your page.

Note that REI has chosen HTML <link> elements instead of HTTP headers. Make sure to use fully qualified absolute URLs in the <link> elements instead of relative URLs.

For general recommendations view Google's Search Console page, Indicating paginated content to Google.

Pagination

Pagination, CdrPagination

# Pagination @ SM, MD, LG

# Pagination @ XS

# Degraded Pagination

# Accessibility

Pagination @ SM, MD, LG

Pagination @ XS

Degraded Pagination

Accessibility