Pagination

Links to the pages of a long list, with Bootstrap's names: the current page says so in aria-current="page", a page there is none of says so in aria-disabled. A list that pages by "the next 50" shows only previous, next and where you are.

Examples

A nav named for what it pages holds the list; each page is a link. A page there is none of - the previous one of the first page - is a link without href and aria-disabled="true", out of the Tab order. Skip no page silently: an ellipsis stands for the pages between. Show no pagination for a single page.

<nav aria-label="Pages of excursions">
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#pagination-numbers"><i class="bi bi-chevron-left flip-rtl" aria-hidden="true"></i><span class="visually-hidden">Previous page</span></a></li>
		<li class="page-item"><a class="page-link" href="#pagination-numbers">1</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-numbers" aria-current="page">2</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-numbers">3</a></li>
		<li class="page-item"><span class="page-text" aria-hidden="true">…</span></li>
		<li class="page-item"><a class="page-link" href="#pagination-numbers">12</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-numbers"><span class="visually-hidden">Next page</span><i class="bi bi-chevron-right flip-rtl" aria-hidden="true"></i></a></li>
	</ul>
</nav>

Previous and next

A list that reads its rows page by page from where the last one ended - the fast way for a large table - knows no page numbers: it shows the rows on view and the way back and on. page-text holds words between the links.

<nav aria-label="Pages of bookings">
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#pagination-keyset"><i class="bi bi-chevron-left flip-rtl" aria-hidden="true"></i>Previous</a></li>
		<li class="page-item"><span class="page-text">51-100 of 1 234</span></li>
		<li class="page-item"><a class="page-link" href="#pagination-keyset">Next<i class="bi bi-chevron-right flip-rtl" aria-hidden="true"></i></a></li>
	</ul>
</nav>

Sizes

pagination-sm and pagination-lg on the list.

<nav aria-label="Small pages">
	<ul class="pagination pagination-sm">
		<li class="page-item"><a class="page-link" aria-disabled="true"><i class="bi bi-chevron-left flip-rtl" aria-hidden="true"></i><span class="visually-hidden">Previous page</span></a></li>
		<li class="page-item"><a class="page-link" href="#pagination-sizes" aria-current="page">1</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-sizes">2</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-sizes"><span class="visually-hidden">Next page</span><i class="bi bi-chevron-right flip-rtl" aria-hidden="true"></i></a></li>
	</ul>
</nav>
<nav aria-label="Large pages">
	<ul class="pagination pagination-lg">
		<li class="page-item"><a class="page-link" href="#pagination-sizes">1</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-sizes" aria-current="page">2</a></li>
		<li class="page-item"><a class="page-link" href="#pagination-sizes">3</a></li>
	</ul>
</nav>

States

class	rest	:hover	:focus-visible	aria-current	aria-disabled
page-link	4	4	4	4	4

Keyboard and accessibility

The nav has a name - "Pages of excursions" - so a screen reader lists it among the landmarks; the current page is aria-current="page", read as "current page".
An arrow-only link carries its words in visually-hidden text; the chevrons turn round right to left by flip-rtl.
A page there is none of has no href, so Tab passes it, and aria-disabled="true" greys it.

Tokens

From css/components/pagination.css, which declares no custom property of its own.

It reads the theme's --redz-space-4, --redz-control-height, --redz-space-8, --redz-border, --redz-radius-8, --redz-bg, --redz-text, --redz-text-muted, --redz-bg-hover, --redz-primary, --redz-primary-contrast, --redz-text-faint, --redz-control-height-sm, --redz-fs-12, --redz-control-height-lg, --redz-space-12, --redz-fs-16.