Pagination

A real <nav aria-label="Pagination"> wrapping a real<ol> of page links. The active page is markedaria-current="page".

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

current

disabled controls

Usage

<Pagination>
  <PaginationPrevious />
  <PaginationItem href="?page=1" current>1</PaginationItem>
  <PaginationItem href="?page=2">2</PaginationItem>
  <PaginationItem href="?page=3">3</PaginationItem>
  <PaginationNext />
</Pagination>

<kernel-pagination>
  <kernel-pagination-previous></kernel-pagination-previous>
  <kernel-pagination-item href="?page=1" current>1</kernel-pagination-item>
  <kernel-pagination-item href="?page=2">2</kernel-pagination-item>
  <kernel-pagination-item href="?page=3">3</kernel-pagination-item>
  <kernel-pagination-next></kernel-pagination-next>
</kernel-pagination>

Parts

Props for Pagination.
Component	Renders
`Pagination`	`<nav>` + `<ol>`
`PaginationItem`	`<li><a>`, accepts `current`
`PaginationPrevious` / `PaginationNext`	`<li><button>`
`PaginationEllipsis`	`<li aria-hidden>`