Pagination

• <rh-pagination> must have a nested <ol> element with at least one nested <li> and <a> element.
• Pagination URLs must start with a hash, eg #2.
  • We recommend structuring your pagination URL as follows:
    • example.redhat.com/search/#2
  • If your URL contains query parameters (eg: ?search=test), ensure the hash comes after the query parameter.
  • Ensure the hash for the href in the first page of the pagination is # and not #1.
• The active page is set in this order:
  1. Looking for an aria-current="page" attribute on a <a> tag
  2. Looking in the URL for a hash, eg /search/#2
  3. If neither of these are set and no hashes exist in the URL, <rh-pagination> sets the current page to the first <a> in the list
  4. If <rh-pagination> cannot determine the current link from these conditions, it will log a message to the console saying, "Could not determine current link."

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

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

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

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

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

null

string

'Page navigation'

string

'first page'

string

'previous page'

string

'next page'

string

'last page'

'sm' | null

null

'open' | null

null