Pagination
Pagination communicates the number of elements (pages, posts etc) that can be loaded within a given context. It shows the current position and enables direct access to previous and subsequent content items.
Variations
Primary Pagination
Staring from top, basic pagination, pagination with all options, pagination with helper text and elevated pagination.
Copy as:
copydone
copydone
copydone
copydone
<!-- Component: Primary basic pagination -->
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="flex items-center justify-center text-sm list-none md:gap-1 text-slate-700">
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 rounded stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600 focus-visible:outline-none"><span class="order-2 md:sr-only">Prev</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-01 desc-01">
<title id="title-01">Previous page</title>
<desc id="desc-01">link to previous page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 rounded stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600 md:inline-flex focus-visible:outline-none">1</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 2" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 rounded stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600 md:inline-flex focus-visible:outline-none">2</a>
</li>
<li>
<a href="javascript:void(0)" class="items-center justify-center hidden h-10 px-4 text-sm font-medium text-white transition duration-300 rounded whitespace-nowrap bg-emerald-500 ring-offset-2 hover:bg-emerald-600 hover:stroke-emerald-500 focus:bg-emerald-700 md:inline-flex focus-visible:outline-none" aria-label="Current Page, Page 3" aria-current="true">3</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 rounded stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600 md:inline-flex focus-visible:outline-none">4</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 5" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 rounded stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600 md:inline-flex focus-visible:outline-none">5</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 rounded stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600 focus-visible:outline-none"><span class="md:sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-02 desc-02">
<title id="title-02">Next page</title>
<desc id="desc-02">link to next page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ul>
</nav>
<!-- End Primary basic pagination -->Pagination Overline
Staring from top, basic pagination, pagination with all options, pagination with helper text and elevated pagination.
Copy as:
copydone
copydone
copydone
copydone
<!-- Component: Overline basic pagination -->
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="flex items-center justify-center text-sm list-none md:gap-1 text-slate-700">
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600"><span class="order-2 md:sr-only">Prev</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-25 desc-25">
<title id="title-25">Previous page</title>
<desc id="desc-25">link to previous page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">1</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 2" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">2</a>
</li>
<li>
<a href="javascript:void(0)" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 border-t focus-visible:outline-none whitespace-nowrap border-t-emerald-500 text-emerald-500 hover:border-t-emerald-600 hover:bg-emerald-50 hover:text-emerald-600 focus:border-t-emerald-700 focus:bg-emerald-50 focus:text-emerald-700 md:inline-flex" aria-label="Current Page, Page 3" aria-current="true">3</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">4</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 5" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">5</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600"><span class="md:sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-26 desc-26">
<title id="title-26">Next page</title>
<desc id="desc-26">link to next page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ul>
</nav>
<!-- End Overline basic pagination -->Pagination Underline
Staring from top, basic pagination, pagination with all options, pagination with helper text and elevated pagination.
Copy as:
copydone
copydone
copydone
copydone
<!-- Component: Underline basic pagination -->
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="flex items-center justify-center text-sm list-none md:gap-1 text-slate-700">
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600"><span class="order-2 md:sr-only">Prev</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-15 desc-15">
<title id="title-15">Previous page</title>
<desc id="desc-15">link to previous page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">1</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 2" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">2</a>
</li>
<li>
<a href="javascript:void(0)" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 border-b focus-visible:outline-none whitespace-nowrap border-b-emerald-500 text-emerald-500 hover:border-b-emerald-600 hover:bg-emerald-50 hover:text-emerald-600 focus:border-b-emerald-700 focus:bg-emerald-50 focus:text-emerald-700 md:inline-flex" aria-label="Current Page, Page 3" aria-current="true">3</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">4</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 5" class="items-center justify-center hidden h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none md:inline-flex stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600">5</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600"><span class="md:sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-16 desc-16">
<title id="title-16">Next page</title>
<desc id="desc-16">link to next page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ul>
</nav>
<!-- End Underline basic pagination -->Pagination Outline
Staring from top, basic pagination, pagination with all options, pagination with helper text and elevated pagination.
Copy as:
copydone
copydone
copydone
copydone
<!-- Component: Outline basic pagination -->
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="flex items-center justify-center overflow-hidden text-sm list-none border divide-x rounded divide-slate-200 border-slate-200 text-slate-700">
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600"><span class="order-2 md:sr-only">Prev</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-35 desc-35">
<title id="title-35">Previous page</title>
<desc id="desc-35">link to previous page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 md:inline-flex">1</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 2" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 md:inline-flex">2</a>
</li>
<li>
<a href="javascript:void(0)" class="items-center justify-center hidden h-10 px-4 text-sm font-medium text-white transition duration-300 focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 md:inline-flex" aria-label="Current Page, Page 3" aria-current="true">3</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 md:inline-flex">4</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 5" class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 md:inline-flex">5</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 4" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:stroke-emerald-500 hover:text-emerald-500 focus:bg-emerald-50 focus:stroke-emerald-600 focus:text-emerald-600"><span class="md:sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-36 desc-36">
<title id="title-36">Next page</title>
<desc id="desc-36">link to next page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ul>
</nav>
<!-- End Outline basic pagination -->Pagination Minimal
Copy as:
copydone
copydone
copydone
copydone
<!-- Component: Minimal basic pagination with icons and text -->
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="flex items-center justify-center text-sm list-none md:gap-1 text-slate-700">
<li>
<a href="javascript:void(0)" aria-label="Goto Page 1" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 rounded focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600"><span class="order-2">Prev</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-09 desc-09">
<title id="title-09">Previous page</title>
<desc id="desc-09">link to previous page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Goto Page 3" class="inline-flex items-center justify-center h-10 gap-4 px-4 text-sm font-medium transition duration-300 rounded focus-visible:outline-none stroke-slate-700 text-slate-700 hover:bg-emerald-50 hover:text-emerald-500 hover:stroke-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:stroke-emerald-600"><span>Next </span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 -mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-10 desc-10">
<title id="title-10">Next page</title>
<desc id="desc-10">link to next page</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ul>
</nav>
<!-- End Minimal basic pagination with icons and text -->Usage
Pagination consists of a list of links that help a user visualize the current location within a set of content. Use the pagination component to allow users to navigate to other pages, to the previous or next page and even to the first or last pages. On small screens, only the links to the previous and next page are showing.
Specs
Pagination uses the nav element with an inner list with a set of links. It comes in 4 styles, basic, outline, underline top and underline bottom. The links can contain icons and text:
- Links: 0.875rem (14px) font size and 1rem (16px) horizontal padding.
- Icons: 1em height (16px) pixel with and height.
Accessibility notes
- The pagination links are wrapped
<nav>element with arole=navigationand aria-label to make it clearer to users that this navigation landmark is intended for the pagination. - By using aria-label, we can add a meaningful label to each link, so instead of hearing the screen reader saying "Link, 1" it will be "Link, Goto Page 1".
- To indicate which element is active, the aria-current label is used like so:
aria-label="Current Page, Page 3" aria-current="true"