Pagination

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

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

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

<meta itemprop="description" content="Default pagination with page links and numeric input.">
<rh-pagination>
  <ol>
    <li><a href="./">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>
  </ol>
</rh-pagination>

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

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

• <rh-pagination> must have a nested <ol> element with at least one nested <li> and <a> element.
• Each <a> element must have an href attribute that links to the corresponding page.

You can implement pagination URLs using any of these approaches:

• Example: example.redhat.com/search/#2, example.redhat.com/search/#3
• If using query parameters, ensure the hash comes after: example.redhat.com/search/?q=test#2

• Example: example.redhat.com/search?page=2, example.redhat.com/search?page=3
• Can be combined with other query parameters: example.redhat.com/search?q=test&page=2

• Example: example.redhat.com/search/page/2, example.redhat.com/search/page/3

• Set aria-current="page" on the current page's <a> element
• Useful for server-side rendered pagination

The component determines the active page in this order:

1. Looking for an aria-current="page" attribute on an <a> tag
2. Matching the full URL (pathname, search parameters, and hash) against each link's href
3. If no match is found, the component logs a warning: "could not determine current link"

Provides page navigation for content using stepper buttons, numbered links, and a page-input field. Authors MUST provide an <ol> with <li><a> page links. SHOULD use aria-current="page" on the active link. Screen readers announce the <nav> landmark via label. Tab moves focus through steppers and input; Enter activates.

'start' | 'end' | 'both' | null

null

string

'Page navigation'

string

'first page'

string

'previous page'

string

'next page'

string

'last page'

'sm' | null

null

'borderless' | null

null