A paginator allows users to navigate between pages of related content.

Image of two paginations; one is full size showing double truncation and a page input field and the other one is compact size showing only a page field input.

Sample element

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5


View a live version of this element to see how it can be customized.

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

<link rel="stylesheet" href="../rh-pagination-lightdom.css">

<script type="module">
import '@rhds/elements/rh-pagination/rh-pagination.js';

View the demo

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify