Components
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
A basic form of pagination.
<nav class="flex items-center space-x-2">
<a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center gap-2 rounded-md" href="#">
Previous
</a>
<a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
<a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
<a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
<a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center gap-2 rounded-md" href="#">
Next
</a>
</nav>
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.
<nav class="flex items-center space-x-2">
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span class="sr-only">Next</span>
<span aria-hidden="true">»</span>
</a>
</nav>
Pagination links are customizable for different circumstances.
<nav class="flex items-center space-x-2">
<a class="text-gray-400 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md pointer-events-none" href="#">
<span aria-hidden="true">«</span>
<span>Previous</span>
</a>
<a class="w-10 h-10 bg-blue-500 text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span>Next</span>
<span aria-hidden="true">»</span>
</a>
</nav>
Change the alignment of pagination components.
<nav class="flex justify-center items-center space-x-2">
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
<a class="w-10 h-10 bg-blue-500 text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span class="sr-only">Next</span>
<span aria-hidden="true">»</span>
</a>
</nav>
<nav class="flex justify-end items-center space-x-2">
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
<a class="w-10 h-10 bg-blue-500 text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
<a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
<a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
<span class="sr-only">Next</span>
<span aria-hidden="true">»</span>
</a>
</nav>