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.

<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="../rh-pagination-lightdom.css">
<script type="module" src="rh-pagination.js"></script>

<h2>Valid HTML</h2>

<p>Paginators with 5 or fewer pages should not overflow, meaning all links should be visible.
Once a paginator has more than 5 pages, then it must overflow, meaning some links will be hidden.
Paginators with 9 or more pages will overflow on boths ends.</p>

<dt>With 5 or fewer pages</dt>
<dd>No overflow</dd>
<dt>With more than 5 but fewer than 9 pages</dt>
<dd>Overflow on one side</dd>
<dt>With more than 9 pages, active page is less than 6</dt>
<dd>Overflow end</dd>
<dt>With more than 9 pages, active page is greater than 6</dt>
<dd>Overflow both</dd>
<dt>With more than 9 pages, active page is greater than 5 less than the total (e.g. 16/20)</dt>
<dd>Overflow start</dd>

<rh-button id="add">Add Page</rh-button>
<rh-button id="remove" danger>Remove Page</rh-button>

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

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