v1.4.0
Website Preview Support

Pagination

Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.

Basic Example

Use slightly customized pagination with previous and next icon links:

<!-- BEGIN PAGINATION -->
<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>

  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </a>
  </li>
</ul>
<!-- END PAGINATION -->

When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.

<!-- BEGIN PAGINATION -->
<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevrons-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M11 7l-5 5l5 5" />
        <path d="M17 7l-5 5l5 5" />
      </svg></a>
  </li>
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>

  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevrons-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M7 7l5 5l-5 5" />
        <path d="M13 7l5 5l-5 5" />
      </svg>
    </a>
  </li>
</ul>
<!-- END PAGINATION -->

Offset

If the count of pages is too large, you can use offset to show only a few pages at a time.

<!-- BEGIN PAGINATION -->
<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <span class="page-link disabled">&hellip;</span>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">18</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">19</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">20</a>
  </li>

  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </a>
  </li>
</ul>
<!-- END PAGINATION -->

Button With Text

When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.

<!-- BEGIN PAGINATION -->
<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link page-text" href="#" tabindex="-1" aria-disabled="true">
      Previous
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>

  <li class="page-item">
    <a class="page-link page-text" href="#">
      Next
    </a>
  </li>
</ul>
<!-- END PAGINATION -->

Outline version

If you want to use an outline version of the pagination, you can use the .pagination-outline class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.

<!-- BEGIN PAGINATION -->
<ul class="pagination pagination-outline">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>

  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </a>
  </li>
</ul>
<!-- END PAGINATION -->

Circle version

If you want to use a circle version of the pagination, you can use the .pagination-circle class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the .pagination-outline class for a more prominent look.

<!-- BEGIN PAGINATION -->
<ul class="pagination pagination-circle">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>

  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </a>
  </li>
</ul>
<!-- END PAGINATION -->

<!-- BEGIN PAGINATION -->
<ul class="pagination pagination-circle pagination-outline">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>

  <li class="page-item">
    <a class="page-link" href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
        focusable="false" class="icon icon-1">
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </a>
  </li>
</ul>
<!-- END PAGINATION -->
© 2025 Tabler. All rights reserved.

Table of Contents

100 sleek illustrations for your startup's visual identity.