Pagination

Splits a long list into pages and moves between them, saying where the person is and how much is left.

On this page

Playground

Current page

Per page

Background

HTML

<nav class="feitio-pagination" aria-label="Schedule pages"><ul><li><span aria-current="page">1</span></li><li><a href="#playground-2" aria-label="Page 2">2</a></li><li><span class="gap" aria-hidden="true">…</span></li><li><a href="#playground-7" aria-label="Page 7">7</a></li><li><a class="step" href="#playground-2" rel="next">Next<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></a></li></ul><div class="meta"><p class="count">Showing 1–20 / 132</p></div></nav>

When to use

When a table or list goes past about 25 to 50 rows.

When not to use

Few rows: show them all.
Infinite scroll: no. It hides the footer, does not let you return to the same spot and confuses screen readers.

Examples

Pages and per page

Previous and Next in words, the current page marked with the ink line, the count and, optionally, how many items per page.

Show code

HTML

<nav class="feitio-pagination" aria-label="Páginas de agendamentos">
  <ul>
    <li><a class="step prev" href="?pagina=2" rel="prev">…Anterior</a></li>
    <li><span aria-current="page">3</span></li>
    <li><a class="step" href="?pagina=4" rel="next">Próxima…</a></li>
  </ul>
  <div class="meta">
    <p class="count">Mostrando 41 a 60 de 132 agendamentos</p>
    <div class="per-page" role="group" aria-label="Por página">…</div>
  </div>
</nav>

Variations

First and last page: a link that goes nowhere disappears; it is not disabled.
Many pages: the first, the last and the current one’s neighbors, with an ellipsis in between.
When changing the size: the new page starts at the first item the person was seeing.
Everything fits on one page: the whole component disappears; if only the numbers go, "Per page" stays.

Anatomy

Previous and Next: word with the arrow; they disappear on the first and last page.
Current page: the ink line, no link.
Next, always at the end of the line.
Count: where the person is and the total.
Per page, optional.

Do and don’t

Says where the person is and how much is left.

Don’t

Arrows only, no number, no total.

A named <nav>; the current page with aria-current="page" and no link.
Each number with its full name for screen readers ("Page 4").
40px targets, even on the numbers.

Attributes

Attribute	Values	What for
`class="feitio-pagination"`	on the `<nav>`	The links in a row and, below, the count and size.
`aria-current="page"`	on the current page	Ink line, no link.
`class="step"`, `"step prev"`	Next and Previous	Word with the arrow.
`rel`	`"prev"`, `"next"`	Tells the browser which page is previous and next.
`class="per-page"`	optional	The page sizes, as links.