Navigation

Pagination

Links between the pages of a long list, with the current page highlighted.

Class name	Type	Description
`paginationplf:pagination`	Component	The pagination landmark
`pagination-listplf:pagination-list`	Part	The list of controls
`pagination-linkplf:pagination-link`	Part	A page, Previous or Next link
`pagination-textplf:pagination-text`	Part	A control's text label
`pagination-ellipsisplf:pagination-ellipsis`	Part	Skipped pages
`pagination-iconplf:pagination-icon`	Part	An SVG icon in a control; an icon class there doesn't need it
`pagination-previousplf:pagination-previous`	Modifier	Draws a back chevron
`pagination-nextplf:pagination-next`	Modifier	Draws a forward chevron

Default

<nav class="pagination" aria-label="Pages">
  <ul class="pagination-list" role="list">
    <li>
      <a class="pagination-link pagination-previous" href="#" aria-label="Previous page" rel="prev">
        <span class="pagination-text">Previous</span>
      </a>
    </li>
    <li><a class="pagination-link" href="#" aria-label="Page 1">1</a></li>
    <li><span aria-current="page">2</span></li>
    <li><a class="pagination-link" href="#" aria-label="Page 3">3</a></li>
    <li>
      <a class="pagination-link pagination-next" href="#" aria-label="Next page" rel="next">
        <span class="pagination-text">Next</span>
      </a>
    </li>
  </ul>
</nav>

<nav class="plf:pagination" aria-label="Pages">
  <ul class="plf:pagination-list" role="list">
    <li>
      <a class="plf:pagination-link plf:pagination-previous" href="#" aria-label="Previous page" rel="prev">
        <span class="plf:pagination-text">Previous</span>
      </a>
    </li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 1">1</a></li>
    <li><span aria-current="page">2</span></li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 3">3</a></li>
    <li>
      <a class="plf:pagination-link plf:pagination-next" href="#" aria-label="Next page" rel="next">
        <span class="plf:pagination-text">Next</span>
      </a>
    </li>
  </ul>
</nav>

import { Pagination, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@pelatform/react';

export function Example() {
  return (
    <Pagination>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink current>2</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 3">3</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </Pagination>
  );
}

import { Pagination, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Pagination>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink current>2</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 3">3</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </Pagination>
  );
}

Keep role="list", since WebKit stops announcing a list without markers, and name each page link with aria-label, such as “Page 3”. The current page is a <span aria-current="page">, and an unavailable control a <span aria-disabled="true">.

Disabled

<nav class="pagination" aria-label="First page">
  <ul class="pagination-list" role="list">
    <li>
      <span class="pagination-previous" aria-disabled="true">
        <span class="pagination-text">Previous</span>
      </span>
    </li>
    <li><span aria-current="page">1</span></li>
    <li><a class="pagination-link" href="#" aria-label="Page 2">2</a></li>
    <li>
      <a class="pagination-link pagination-next" href="#" aria-label="Next page" rel="next">
        <span class="pagination-text">Next</span>
      </a>
    </li>
  </ul>
</nav>

<nav class="plf:pagination" aria-label="First page">
  <ul class="plf:pagination-list" role="list">
    <li>
      <span class="plf:pagination-previous" aria-disabled="true">
        <span class="plf:pagination-text">Previous</span>
      </span>
    </li>
    <li><span aria-current="page">1</span></li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 2">2</a></li>
    <li>
      <a class="plf:pagination-link plf:pagination-next" href="#" aria-label="Next page" rel="next">
        <span class="plf:pagination-text">Next</span>
      </a>
    </li>
  </ul>
</nav>

import { Pagination, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@pelatform/react';

export function Example() {
  return (
    <Pagination aria-label="First page">
      <PaginationItem>
        <PaginationPrevious disabled />
      </PaginationItem>
      <PaginationItem><PaginationLink current>1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 2">2</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </Pagination>
  );
}

import { Pagination, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Pagination aria-label="First page">
      <PaginationItem>
        <PaginationPrevious disabled />
      </PaginationItem>
      <PaginationItem><PaginationLink current>1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 2">2</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </Pagination>
  );
}

Ellipsis

<nav class="pagination" aria-label="Pages with gaps">
  <ul class="pagination-list" role="list">
    <li><a class="pagination-link" href="#" aria-label="Page 1">1</a></li>
    <li>
      <span class="pagination-ellipsis">
        <span aria-hidden="true">…</span>
        <span class="sr-only">Skipped pages</span>
      </span>
    </li>
    <li><a class="pagination-link" href="#" aria-label="Page 5">5</a></li>
    <li><span aria-current="page">6</span></li>
    <li><a class="pagination-link" href="#" aria-label="Page 7">7</a></li>
    <li>
      <span class="pagination-ellipsis">
        <span aria-hidden="true">…</span>
        <span class="sr-only">Skipped pages</span>
      </span>
    </li>
    <li><a class="pagination-link" href="#" aria-label="Page 12">12</a></li>
  </ul>
</nav>

<nav class="plf:pagination" aria-label="Pages with gaps">
  <ul class="plf:pagination-list" role="list">
    <li><a class="plf:pagination-link" href="#" aria-label="Page 1">1</a></li>
    <li>
      <span class="plf:pagination-ellipsis">
        <span aria-hidden="true">…</span>
        <span class="plf:sr-only">Skipped pages</span>
      </span>
    </li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 5">5</a></li>
    <li><span aria-current="page">6</span></li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 7">7</a></li>
    <li>
      <span class="plf:pagination-ellipsis">
        <span aria-hidden="true">…</span>
        <span class="plf:sr-only">Skipped pages</span>
      </span>
    </li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 12">12</a></li>
  </ul>
</nav>

import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink } from '@pelatform/react';

export function Example() {
  return (
    <Pagination aria-label="Pages with gaps">
      <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 5">5</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink current>6</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 7">7</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 12">12</PaginationLink></PaginationItem>
    </Pagination>
  );
}

import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Pagination aria-label="Pages with gaps">
      <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 5">5</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink current>6</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 7">7</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 12">12</PaginationLink></PaginationItem>
    </Pagination>
  );
}

With icons

Without a text label, pagination-previous and pagination-next show their chevron alone, which flips in right-to-left layouts; an icon of yours goes in a pagination-link without those classes.

<nav class="pagination" aria-label="Pages with icons">
  <ul class="pagination-list" role="list">
    <li>
      <a class="pagination-link pagination-previous" href="#" aria-label="Previous page" rel="prev"></a>
    </li>
    <li><a class="pagination-link" href="#" aria-label="Page 1">1</a></li>
    <li><span aria-current="page">2</span></li>
    <li><a class="pagination-link" href="#" aria-label="Page 3">3</a></li>
    <li><a class="pagination-link pagination-next" href="#" aria-label="Next page" rel="next"></a></li>
  </ul>
</nav>

<nav class="plf:pagination" aria-label="Pages with icons">
  <ul class="plf:pagination-list" role="list">
    <li>
      <a class="plf:pagination-link plf:pagination-previous" href="#" aria-label="Previous page" rel="prev"></a>
    </li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 1">1</a></li>
    <li><span aria-current="page">2</span></li>
    <li><a class="plf:pagination-link" href="#" aria-label="Page 3">3</a></li>
    <li><a class="plf:pagination-link plf:pagination-next" href="#" aria-label="Next page" rel="next"></a></li>
  </ul>
</nav>

import { Pagination, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@pelatform/react';

export function Example() {
  return (
    <Pagination aria-label="Pages with icons">
      <PaginationItem>
        <PaginationPrevious href="#">{null}</PaginationPrevious>
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink current>2</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 3">3</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationNext href="#">{null}</PaginationNext>
      </PaginationItem>
    </Pagination>
  );
}

import { Pagination, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Pagination aria-label="Pages with icons">
      <PaginationItem>
        <PaginationPrevious href="#">{null}</PaginationPrevious>
      </PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink current>2</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#" aria-label="Page 3">3</PaginationLink></PaginationItem>
      <PaginationItem>
        <PaginationNext href="#">{null}</PaginationNext>
      </PaginationItem>
    </Pagination>
  );
}

React

Pagination from @pelatform/react renders the nav and its list around its items; a router’s Link takes the classes and attributes of the HTML tab, such as pagination-link.

Prop	Values	Default
`aria-label`	The navigation’s name	`Pages`
`current`	On `PaginationLink`, `true` for the current page: a `<span aria-current="page">` without the link’s `href` and `aria-label`	`false`
`disabled`	On `PaginationPrevious` and `PaginationNext`, `true` on the first or last page: a `<span aria-disabled="true">` in the link’s place	`false`

The parts:

Part	Element
`PaginationItem`	An `li`
`PaginationLink`	An `a` with `pagination-link`
`PaginationPrevious`	An `a` with `pagination-link` and `pagination-previous`, named Previous page and labeled Previous unless given others
`PaginationNext`	An `a` with `pagination-link` and `pagination-next`, named Next page and labeled Next unless given others
`PaginationEllipsis`	A `span` with `pagination-ellipsis`, read as Skipped pages unless given other children

Other props are the element’s own, className and ref included.

CSS variables

Pagination has no JavaScript: your application builds the URLs and marks the current page. Override these variables on a root or on a single pagination.

Variable	Default
`--plf-pagination-color`	Text color
`--plf-pagination-bg`, `--plf-pagination-border`	Transparent
`--plf-pagination-hover-bg`	Muted surface; a custom `--plf-pagination-bg` stays on hover unless this is set
`--plf-pagination-current-bg`	`--plf-color-primary-subtle`
`--plf-pagination-current-color`	`--plf-color-primary-text`
`--plf-pagination-current-border`	`--plf-color-primary-border`
`--plf-pagination-height`	Small control height (32px), also the minimum width
`--plf-pagination-radius`	Large radius (8px)
`--plf-pagination-gap`	Space 1 (4px)
`--plf-pagination-icon-size`	Control icon size (16px)

#Default

#Disabled

#Ellipsis

#With icons

#React

#CSS variables