Navigation

Pagination

The pages of a long list, as a row of links.

On this page

Pagination is the pages of a long list, as a row of links inside a <nav>. The links are quiet square buttons; the current page has aria-current="page" and stays sunk into a well, like a pressed toggle. This stylesheet supplies the row and the gap that stands for skipped pages. Pages that are read in an order and named, as the chapters of a guide are, take a pager.

Pagination

PreviewCode

<nav aria-label="Pagination">  <ol class="pagination">    <li>      <a class="btn btn-quiet btn-square btn-sm" href="#page-1" aria-label="Previous page">        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">          <path d="m15 6-6 6 6 6" />        </svg>      </a>    </li>    <li>      <a class="btn btn-quiet btn-square btn-sm" href="#page-1" aria-label="Page 1">1</a>    </li>    <li>      <a class="btn btn-quiet btn-square btn-sm" href="#page-2" aria-label="Page 2" aria-current="page">2</a>    </li>    <li>      <a class="btn btn-quiet btn-square btn-sm" href="#page-3" aria-label="Page 3">3</a>    </li>    <li class="pagination-gap" aria-hidden="true">…</li>    <li>      <a class="btn btn-quiet btn-square btn-sm" href="#page-24" aria-label="Page 24">24</a>    </li>    <li>      <a class="btn btn-quiet btn-square btn-sm" href="#page-3" aria-label="Next page">        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">          <path d="m9 6 6 6-6 6" />        </svg>      </a>    </li>  </ol></nav>

#Previous and next only

When the number of pages is unknown or does not matter, two labelled buttons are enough. A link cannot be disabled: on the first page, give "Previous" aria-disabled="true" and remove its href.

Previous and next only

PreviewCode

<nav class="flex items-center gap-xs" aria-label="Pagination">  <a class="btn btn-sm" aria-disabled="true">Previous</a>  <span class="text-sm fg-text-muted px-xs">Page 1 of 24</span>  <a class="btn btn-sm" href="#page-2">Next</a></nav>

#Accessibility

Wrap the list in <nav aria-label="Pagination"> and mark the current page with aria-current="page".
A bare number is a poor link name. Give each page link an aria-label such as "Page 3".
Hide the gap with aria-hidden="true": it is not a control.

#Classes

Class	Description
`pagination`	The row of page links, on an ol inside a nav with aria-label. Figures are tabular, so the row keeps its width from page to page
`pagination-gap`	An ellipsis where pages are left out. It is not a control: hide it with aria-hidden="true"

#Source

@master/ui/components/pagination.css

/* * Pagination: the pages of a long list, as a row of links inside a <nav>. * The links are quiet square buttons; the current page has aria-current="page" and stays sunk into a well, * which the button stylesheet draws. This file supplies the row and the gap that stands for skipped pages. */@layer components {  .pagination {    display: flex;    flex-wrap: wrap;    align-items: center;    gap: 2px;    min-width: 0;    margin: 0;    padding: 0;    font-variant-numeric: tabular-nums;    list-style: none;  }  /* An ellipsis where pages are left out. It is not a control, so hide it from assistive technology. */  .pagination-gap {    display: grid;    place-items: center;    min-width: 2rem;    height: 2rem;    color: var(--color-text-muted);    font-size: .78125rem;    user-select: none;    -webkit-user-select: none;    /* Beside 44px links it keeps their rhythm. */    @media (pointer: coarse) {      min-width: 2.75rem;      height: 2.75rem;    }  }}