Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Pagination Types

There are two types of pagination, namely fill and outline. If you want to mark active page, just add class .active in the pagination item.

              
<!-- filled pagination -->
<nav aria-label="Page navigation">
  <ul class="flex justify-start gap-0">
    <li>
      <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -me-0.5 rounded-l dark:bg-surfacedark-100 dark:border-gray-700" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -me-0.5 dark:bg-surfacedark-100 dark:border-gray-700" href="#">1</a></li>
    <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -me-0.5 dark:bg-surfacedark-100 dark:border-gray-700" href="#">2</a></li>
    <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -me-0.5 dark:bg-surfacedark-100 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -me-0.5 dark:bg-surfacedark-100 dark:border-gray-700 rounded-r" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

<!-- outline pagination -->
<nav aria-label="Page navigation">
  <ul class="flex justify-start gap-0">
    <li>
      <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-l" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-r" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>