# Pagination

> A list of pages. The HTML is the component.

## Basic

Pagination is CSS-only. A `nav.pagination` whose child is an `<ol>` of links. There is no JavaScript plugin.

Mark the current page with `aria-current="page"` (or the older `active` class on the `li`). Unavailable prev/next use `aria-disabled="true"` (or `disabled` on the `li`).

2.  1
3.  2
4.  3
5.  4
6.  5

```
<nav class="pagination" aria-label="Pagination">
  <ol>
    <li>
      <a href="/p/1" aria-label="Previous page" aria-disabled="true">
        <span class="material-symbols" aria-hidden="true">chevron_left</span>
      </a>
    </li>
    <li><a href="/p/1" aria-current="page">1</a></li>
    <li><a href="/p/2">2</a></li>
    <li>
      <a href="/p/3" aria-label="Next page">
        <span class="material-symbols" aria-hidden="true">chevron_right</span>
      </a>
    </li>
  </ol>
</nav>
```

Items are the original compact 2rem chips. The current page fills with `primary`. Icon-only prev/next need an `aria-label`. A `<span>` next to the icon widens the control:

1.  Prev
2.  1
3.  2
4.  3
5.  Next

## Ellipsis

A non-link `<span>` is an inert gap, not a target.

2.  1

4.  8
5.  9
6.  10

```
<li><span aria-hidden="true">…</span></li>
```

## Nowrap

Add `nowrap` so a long run scrolls instead of wrapping. That replaces the old nested `li.pages` tree.

2.  1
3.  2
4.  3
5.  4
6.  5
7.  6
8.  7
9.  8
10.  9
11.  10

```
<nav class="pagination nowrap" aria-label="Pagination">…</nav>
```

## List alias

A bare `<ul class="pagination">` still renders. `active`, `disabled`, `prev`, `next`, and `pages` stay as aliases. It is not the documented form: outside a labelled `<nav>` the list is a row of numbers with nothing saying it paginates anything.

```
<ul class="pagination">
  <li class="disabled">
    <a href="#!" aria-label="Previous"><span class="material-symbols" aria-hidden="true">chevron_left</span></a>
  </li>
  <li class="active"><a href="#!">1</a></li>
</ul>
```