Pagination

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Default pagination with page links and numeric input.">
<rh-pagination>
  <ol>
    <li><a href="?page=1">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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Default pagination with page links and numeric input." />
  <Pagination>
    <ol>
      <li><a href="?page=1">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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/rh-pagination/rh-pagination.js';
window.addEventListener('hashchange', () => {
  const hash = window.location.hash;
  const links = document.querySelectorAll('rh-pagination li a');
  const hashLink = document.querySelector(`rh-pagination li a[href="${hash}"]`);
  for (const link of links) {
    if (link === hashLink) {
      continue;
    }
    link.removeAttribute('aria-current');
  }
  hashLink.setAttribute('aria-current', 'page');
  // slotted content changed lets request an update
  const pagination = document.querySelector('rh-pagination');
  pagination.requestUpdate();
});

<meta itemprop="description" content="Page 3 is marked with aria-current=&quot;page&quot; by default, regardless of the URL. This takes precedence over the URL hash. When the URL hash changes, aria-current=&quot;page&quot; is set on the correct link.">
<rh-pagination>
  <ol>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3" aria-current="page">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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Page 3 is marked with aria-current="page" by default, regardless of the URL. This takes precedence over the URL hash. When the URL hash changes, aria-current="page" is set on the correct link." />
  <Pagination>
    <ol>
      <li><a href="#1">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3" aria-current="page">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-pagination/rh-pagination.js';

rh-context-demo > * {
  margin-block-end: var(--rh-space-2xl, 32px);
}

<meta itemprop="description" content="Pagination rendered in light and dark color contexts.">
<rh-context-demo>
  <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>

  <rh-pagination variant="open">
    <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>

  <rh-pagination size="sm">
    <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>
</rh-context-demo>

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

import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination rendered in light and dark color contexts." />
  <ContextDemo>
    <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>
    </Pagination>
    <Pagination variant="open">
      <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>
    </Pagination>
    <Pagination size="sm">
      <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>
    </Pagination>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/rh-pagination/rh-pagination.js';

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}

<meta itemprop="description" content="Compact pagination layout with numeric input between stepper buttons.">
<rh-pagination id="constrain">
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Compact pagination layout with numeric input between stepper buttons." />
  <Pagination id="constrain">
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

rh-pagination {
  margin-block-end: var(--rh-space-lg, 16px);
}

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Pagination with a large number of pages to test truncation behavior.">
<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>
    <li><a href="#6">6</a></li>
    <li><a href="#7">7</a></li>
    <li><a href="#8">8</a></li>
    <li><a href="#9">9</a></li>
    <li><a href="#10">10</a></li>
    <li><a href="#11">11</a></li>
    <li><a href="#12">12</a></li>
    <li><a href="#13">13</a></li>
    <li><a href="#14">14</a></li>
    <li><a href="#15">15</a></li>
    <li><a href="#16">16</a></li>
    <li><a href="#17">17</a></li>
    <li><a href="#18">18</a></li>
    <li><a href="#19">19</a></li>
    <li><a href="#20">20</a></li>
  </ol>
</rh-pagination>

<p>Paginators with many pages must overflow.</p>

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

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination with a large number of pages to test truncation behavior." />
  <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>
      <li><a href="#6">6</a></li>
      <li><a href="#7">7</a></li>
      <li><a href="#8">8</a></li>
      <li><a href="#9">9</a></li>
      <li><a href="#10">10</a></li>
      <li><a href="#11">11</a></li>
      <li><a href="#12">12</a></li>
      <li><a href="#13">13</a></li>
      <li><a href="#14">14</a></li>
      <li><a href="#15">15</a></li>
      <li><a href="#16">16</a></li>
      <li><a href="#17">17</a></li>
      <li><a href="#18">18</a></li>
      <li><a href="#19">19</a></li>
      <li><a href="#20">20</a></li>
    </ol>
  </Pagination>
  <p>Paginators with many pages must overflow.</p>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

rh-pagination::part(numeric) {
  display: none;
}

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Pagination without the numeric page input control visible.">
<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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination without the numeric page input control visible." />
  <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Compact pagination in the open variant with small size.">
<rh-pagination id="constrain" variant="open" size="sm">
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Compact pagination in the open variant with small size." />
  <Pagination id="constrain" variant="open" size="sm">
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Compact pagination in the open variant style.">
<rh-pagination id="constrain" variant="open">
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Compact pagination in the open variant style." />
  <Pagination id="constrain" variant="open">
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Pagination in the open variant with transparent button backgrounds.">
<rh-pagination variant="open">
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination in the open variant with transparent button backgrounds." />
  <Pagination variant="open">
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

fieldset,
p,
dd {
  margin-block-end: var(--rh-space-lg, 16px)
}

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-pagination/rh-pagination.js';

const $ = s => document.querySelector(s);
const $$ = s => document.querySelectorAll(s);

for (const element of $$('rh-pagination')) {
  element.addEventListener('click', event => {
    const link = event.composedPath().find(x => x instanceof HTMLAnchorElement);
    if (link) {
      event.preventDefault();
      history.pushState(null, link.innerText, link.href);
      element.requestUpdate();
    }
  });
}

$('#add')?.addEventListener('click', function() {
  const link = document.createElement('a');
  const item = document.createElement('li');
  item.append(link);
  const i = $$('rh-pagination li').length + 1;
  link.href = `#${i}`;
  link.textContent = i;
  $('rh-pagination ol').append(item);
  $('rh-pagination').requestUpdate();
});

$('#remove')?.addEventListener('click', function() {
  $('rh-pagination li:last-child')?.remove?.();
});

<meta itemprop="description" content="Pagination demonstrating truncation overflow with many pages.">
<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>

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

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

<fieldset>
  <legend>Adjust pages</legend>
  <rh-button id="add">Add Page</rh-button>
  <rh-button id="remove" danger="">Remove Page</rh-button>
</fieldset>



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

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination demonstrating truncation overflow with many pages." />
  <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>
  </Pagination>
  <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>
  <dl>
    <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>
  </dl>
  <fieldset>
    <legend>Adjust pages</legend>
    <Button id="add">Add Page</Button>
    <Button id="remove" danger>Remove Page</Button>
  </fieldset>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Pagination in right-to-left (RTL) direction layout.">
<p>צריך להיראות יותר טוב</p>
<rh-pagination id="rtl-pagination" dir="rtl">
  <span slot="go-to-page">עבור לדף</span>
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination in right-to-left (RTL) direction layout." />
  <p>צריך להיראות יותר טוב</p>
  <Pagination id="rtl-pagination" dir="rtl">
    <span slot="go-to-page">עבור לדף</span>
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Compact pagination in small size with inline numeric input.">
<rh-pagination id="constrain" size="sm">
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Compact pagination in small size with inline numeric input." />
  <Pagination id="constrain" size="sm">
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/rh-pagination/rh-pagination.js';

<meta itemprop="description" content="Pagination in small size variant with reduced button dimensions.">
<rh-pagination size="sm">
  <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">

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Pagination in small size variant with reduced button dimensions." />
  <Pagination size="sm">
    <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>
  </Pagination>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);

import '@rhds/elements/rh-pagination/rh-pagination.js';
import { createApp } from 'vue/dist/vue.esm-browser.js';

const app = createApp({
  data() {
    return {
      message: 'You are currently on page',
      pages: [1, 2, 3, 4, 5],
      currentPage: 3
    }
  },
  mounted() {
    const pagination = document.querySelector('rh-pagination');

    // get current Page by using the aria-current attribute
    const currentPage = pagination.querySelector('li a[aria-current="page"]');
    if (currentPage) {
      this.currentPage = new URL(currentPage.href).hash.slice(1);
    }

    // Add hash change listener
    window.addEventListener('hashchange', () => {
      const hash = window.location.hash;
      this.currentPage = hash.slice(1);
      const links = pagination.querySelectorAll('li a');
      const hashLink = pagination.querySelector(`li a[href="${hash}"]`);
      for (const link of links) {
        if (link === hashLink) {
continue;
        }
        link.removeAttribute('aria-current');
      }
      hashLink.setAttribute('aria-current', 'page');
      pagination.requestUpdate();
    });
  },
});
app.mount('#app');

<meta itemprop="description" content="Demonstration of the pagination element in a simple Vue 3 application.">


<div id="app">
  <rh-pagination>
    <ol>
      <li v-for="pageNum in pages" :key="pageNum">
        <a :href="`#${pageNum}`" :aria-current="pageNum == currentPage ? 'page' : null" v-text="pageNum"></a>
      </li>
    </ol>
  </rh-pagination>

  <span v-text="message"></span> <span v-text="currentPage"></span>
</div>



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

import { Pagination } from "@rhds/elements/react/rh-pagination/rh-pagination.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Demonstration of the pagination element in a simple Vue 3 application." />
  <div id="app">
    <Pagination>
      <ol>
        <li v-for="pageNum in pages" :key="pageNum">
<a :href="`#${pageNum}`" :aria-current="pageNum == currentPage ? 'page' : null" v-text="pageNum" />
        </li>
      </ol>
    </Pagination>
    <span v-text="message" />
    <span v-text="currentPage" />
  </div>
  <link rel="stylesheet" href="../rh-pagination-lightdom.css" />
);