Allows users to navigate to next or previous page when content is split into several pages
At the sm, md, and lg breakpoints, pagination displays as a list of number text links. Prev and Next links are also added when applicable.
By default, CdrPagination assumes that you are navigating through pages on a site and will update the URL on change. For content that requires pagination but is part of a larger page the linkTag
and forLabel
properties can be used to render a button based pagination. Set linkTag
to be "button"
and set the forLabel
to describe what element is being paginated, for example "Pagination for user reviews"
By default pagination uses anchor elements which navigate the users web browser when clicked. This behavior can be overriden by adding a handler to the navigate
event which emits (currentPage, currentUrl, event)
and calling event.preventDefault()
in the handler function. The currentPage
and currentUrl
can then be used to implement router based navigation or programmatically navigate the page. This can also be used in conjunction with the link-tag
property to render a button based pagination.
At the xs breakpoint, pagination adapts to a Select component using the native UI dropdown menu.
This component complies with accessibility guidelines by doing the following:
<nav>
element to let screen readers recognize the pagination controlsaria-label="pagination"
to describe the type of navigation.aria-current="page"
to the link that points to the current pageIf you are building an intra-page button based pagination, the forLabel
property must be used to indicate what content is being paginated. For example,
<div>
<div>{{ reviews content }}</div>
<cdr-pagination
link-tag="button"
for-label="pagination for reviews"
:pages="pages"
:total-pages="5"
v-model="page"
/>
</div>
This component has compliance with WCAG guidelines by:
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 (opens new window) 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.
Within pagination, link styles are adapted
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.
Pagination adapts to a Select component with a native UI dropdown menu on XS breakpoints to provide a mobile-friendly experience.
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.
linkTag
name
string
type
a
default
Sets which tag type is used to render pagination elements. Possible values: { 'a' | 'button' }
forLabel
name
string
type
N/A
default
Used to customize the aria-label for the root pagination element. For page-level pagination (i.e, pagination that updates the entire page content and changes the URL) this property should be omitted. For intra-page navigation this property should describe the element being paginated, for example: `Pagination for sub-content`
input
name
pageNumber, event
arguments
$emit event fired when page prop value is updated.
navigate
name
pageNumber, url, 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. `event.preventDefault()` can be used to override the default link navigation behavior