Pagination
On this page
On this page
Overview
A paginator allows users to navigate between pages of related content.
Edit element properties
import '@rhds/elements/rh-pagination/rh-pagination.js';<rh-pagination>
<ol>
<li><a href="#">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
</ol>
</rh-pagination>
<link rel="stylesheet" href="../rh-pagination-lightdom.css">Override overflow values set from HTML or JS.
overflow should ideally be private, but because
we can't do ::slotted(nav ol li), we need to reflect
it to a host attribute, so that lightdom CSS can target
the list items.
Accessible label for the 'nav' element
Accessible label for the 'first page' button
Accessible label for the 'previous page' button
Accessible label for the 'next page' button
Accessible label for the 'last page' button
Change pagination size to small
"Open" variant
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- When you need to divide large quantities of data or content into chunks
- When you need to enable users to navigate to through pages or locate a specific page number
- When you need to improve the loading performance of a system
Image of four paginations; one is full size showing double truncation and a
page input field. One is compact size showing only a page field input. The two
below it are the open variants in the same sizes.
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
