Pagination

# 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.

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

Use pagination logic to truncate link list, when possible.

# Responsiveness

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

# Props

# Events

# Installation

Resources are available with the CdrPagination package:

• Component: @rei/cdr-pagination
• Component styles: cdr-pagination.css

To incorporate the required assets for a component, use the following steps:

# 1. Install using NPM

Install the CdrPagination package using npm in your terminal:

Terminal

npm i -s @rei/cdr-pagination

# 2. Import Dependencies

main.js

// import your required CSS
import "@rei/cdr-pagination/dist/cdr-pagination.css";

# 3. Add Component to a Template

local.vue

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

<script>
import { CdrPagination } from '@rei/cdr-pagination';
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' }
      ]
    };
  },
}
</script>

# 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".

# Responsive Behavior and Navigation

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/cdr-pagination';
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>

# Usage with Vue Router

Page URLs still need to be provided for SEO purposes, but the events emitted by the component can be used for routing using Vue Router by modifying $route in a method.

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

<script>
import { CdrPagination } from '@rei/cdr-pagination';
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: {
    vueNavigate(num, e) {
           e.preventDefault();
           this.$router.replace({ query: Object.assign({}, this.$route.query, { 'router-query’: num }) });
       },
  },
}
</script>

# 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.