Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Example
Example pagination with active page.
<!-- left pagination -->
<nav aria-label="Page navigation">
<ul x-data="{ item: '1' }" class="flex justify-start space-x-0">
<li>
<a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5 ltr:rounded-l rtl:rounded-r" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">1</a></li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">2</a></li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">3</a></li>
<li>
<a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5 ltr:rounded-r rtl:rounded-l" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- center pagination -->
<nav aria-label="Page navigation">
<ul x-data="{ item: '1' }" class="flex justify-center space-x-0">
<li>
<a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5 ltr:rounded-l rtl:rounded-r" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">1</a></li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">2</a></li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">3</a></li>
<li>
<a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5 ltr:rounded-r rtl:rounded-l" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- right pagination -->
<nav aria-label="Page navigation">
<ul x-data="{ item: '1' }" class="flex justify-end space-x-0">
<li>
<a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5 ltr:rounded-l rtl:rounded-r" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">1</a></li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">2</a></li>
<li><a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5" href="#">3</a></li>
<li>
<a :class="{ 'bg-blue-700 text-gray-100 dark:bg-blue-700 dark:text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-blue-700 dark:focus:text-gray-100 -mr-0.5 ltr:rounded-r rtl:rounded-l" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>