Pagination
Numbered pages with an ellipsis, plus simple previous and next.
<nav class="pager" aria-label="Search results pages">
<a class="page prev" href="?p=3" rel="prev" aria-label="Previous page">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
<span>Previous</span>
</a>
<a class="page" href="?p=1">1</a>
<span class="gap" aria-hidden="true">…</span>
<a class="page" href="?p=3">3</a>
<a class="page" href="?p=4" aria-current="page">4</a>
<a class="page" href="?p=5">5</a>
<span class="gap" aria-hidden="true">…</span>
<a class="page" href="?p=12">12</a>
<a class="page next" href="?p=5" rel="next" aria-label="Next page">
<span>Next</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
</a>
</nav>
<p class="count">Showing 61–80 of 237 results</p>
<h3>Simple version</h3>
<nav class="pager simple" aria-label="Article pages">
<a class="page" href="/journal/wool-summer/" rel="prev">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
<span>Wool is a summer fabric</span>
</a>
<a class="page" href="/journal/pressing/" rel="next">
<span>How to press linen</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
</a>
</nav>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; padding: 24px; background: #fff; }
.pager {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
.page {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 40px;
min-height: 40px; /* a comfortable tap target, not 24px */
padding: 0 12px;
justify-content: center;
font-size: .9rem;
text-decoration: none;
color: #5b6b83;
border: 1px solid #e2e7ef;
border-radius: 9px;
background: #fff;
font-variant-numeric: tabular-nums;
}
.page:hover { color: #16202e; border-color: #c9d3e2; background: #f9fbfd; }
.page:focus-visible { outline: 2px solid #3b4fe4; outline-offset: 2px; }
.page[aria-current="page"] {
background: #3b4fe4;
border-color: #3b4fe4;
color: #fff;
font-weight: 600;
}
.page svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gap { padding: 0 4px; color: #a9b4c5; user-select: none; }
.count { text-align: center; font-size: .85rem; color: #8593ab; margin-top: 14px; }
h3 { font-size: 1rem; color: #16202e; margin: 30px 0 12px; text-align: center; }
/* ---- simple previous / next ---- */
.simple { justify-content: space-between; gap: 12px; }
.simple .page { flex: 1; max-width: 300px; padding: 12px 16px; justify-content: flex-start; }
.simple .page:last-child { justify-content: flex-end; text-align: right; }
.simple span { font-size: .9rem; color: #16202e; }
@media (max-width: 520px) {
/* on a phone, keep the arrows and the current page; drop the rest */
.pager .page:not(.prev):not(.next):not([aria-current]) { display: none; }
.pager .gap { display: none; }
.prev span, .next span { position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); }
.prev, .next { padding: 0; min-width: 40px; }
.simple { flex-direction: column; }
.simple .page { max-width: none; }
}How it works
aria-current="page" marks the current page, not a class alone. Screen readers announce it, so someone can tell where they are without reading the whole row of numbers. The blue background is the visual half of the same information.
The current page is still a link. Some implementations make it a <span>, which breaks the row's rhythm and means the element cannot be focused. Keeping it a link with aria-current is cleaner.
The ellipsis is aria-hidden. "Horizontal ellipsis" read aloud between page numbers is noise. It is purely visual shorthand for "there are more pages here".
Minimum 40 pixels each way. Pagination is often built at 24 or 28 pixels, which is well under the 44-pixel target size WCAG asks for and genuinely hard to hit on a phone. Numbers are also the smallest tap targets on most sites.
tabular-nums so the boxes do not change width between "1" and "11".
On mobile, the numbers disappear. Below 520 pixels only Previous, the current page and Next remain, and the arrow labels collapse to icons with the text visually hidden. Eight tiny number boxes on a phone are a worse experience than two large arrows.
Accessibility notes
The <nav> has an aria-label describing what is being paginated. On a page with both article pagination and search results, two unlabelled navs are indistinguishable.
The previous and next links have aria-label attributes, so they are announced meaningfully even once their visible text is hidden at small sizes.
Do not rely on the colour of the current page alone. The bold weight and the aria-current attribute both carry the same information.
Making it yours
rel="prev" and rel="next" no longer affect Google's indexing — it dropped them as a signal in 2019 — but Bing still uses them, browsers use them for prefetching, and they cost nothing.
Make sure each page has its own canonical URL pointing at itself, not at page one. Canonicalising every page of a paginated set to the first page tells Google the rest do not exist, which is one of the more expensive SEO mistakes available.
The result count is worth including. "Showing 61–80 of 237" tells someone whether it is worth continuing, which the page numbers alone do not.
For an infinite scroll or a "load more" button, keep real paginated URLs underneath so the content is still crawlable and linkable. Infinite scroll with no URLs is invisible to search engines.
Related templates
Button set
Primary, secondary, ghost and danger, in three sizes, with every state covered.
HTMLCSSTailwindLoaders and skeletons
Six loading indicators in pure CSS, plus the skeleton pattern that usually beats all of them.
HTMLCSSModal dialog
A modal built on the native dialog element — focus trap and backdrop included, for free.
HTMLCSSJavaScriptAccordion and FAQ
Built on details and summary — open, close and keyboard support with no JavaScript.
HTMLCSSCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.