Pagination

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

Interactive demo

Example

Default Pagination

Features of this pagination include;

1. Switching number of items per page

2. Showing the number of items out of total available items

3. Page numbered buttons. If the pages reach maximum display limit , ellipsis is used to truncate the remaining pages.

4. Go to first page, last page, previous page and next page

Desktop

Mobile

<nav aria-label="Pagination">
  <div class="pagination-container">
    <div class="item_per_page">
      <span>Show <select class="custom-select">
          <option value="10">10</option>
          <option selected="" value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select> entries </span>
    </div>
    <div class="item_count">1-20 of 85 items</div>
    <ul class="pagination  pagination-number pagination-middle">
      <li class="pager-item">
        <a class="page-link" href="#">
          <i class="far fa-chevron-double-left"></i>
          <span class="sr-only">First</span>
        </a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">
          <i class="fal fa-chevron-left"></i>
          <span class="sr-only">Previous</span>
        </a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">1</a>
      </li>
      <li class="pager-item active">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">3</a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">...</a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">18</a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">
          <i class="fal fa-chevron-right"></i>
          <span class="sr-only">Next</span>
        </a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">
          <i class="far fa-chevron-double-right"></i>
          <span class="sr-only">Last</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Page Jumper

Jump to a specific page by entering the page number without page numbered buttons. Features of this pagination include;

1. Switching number of items per page

2. Showing the number of items out of total available items

3. Jump to a specific page by entering the page number

Desktop

Mobile

<nav aria-label="Pagination">
  <div class="pagination-container py-3">
    <div class="item_per_page">
      <span>Show <select class="custom-select">
          <option value="10">10</option>
          <option selected="" value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select> entries </span>
    </div>
    <div class="item_count">1-20 of 85 items</div>
    <ul class="pagination py-0 mb-0">
      <li class="pager-item">
        <a class="page-link" href="#">
          <i class="far fa-chevron-double-left"></i>
          <span class="sr-only">Preivous</span>
        </a>
      </li>
      <li class="pager-item">
        <input type="number" class="form-control" value="1" aria-label="Jump to a page" aria-describedby="basic-addon2">
      </li>
      <li class="pager-item">
        <a class="page-link" href="#">
          <i class="far fa-chevron-double-right"></i>
          <span class="sr-only">Next</span>
        </a>
      </li>
      <span class="ml-2 mt-2">of 36</span>
    </ul>
  </div>
</nav>

Simple Pagination

Features of this pagination include;

1. Contains page numbered buttons. If the pages reach maximum display limit , ellipsis is used to truncate the remaining pages.

2. Go to first page, last page, previous page and next page

Desktop

Mobile

<nav aria-label="Pagination">
  <div class="pagination-container">
    <ul class="pagination unboxed">
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#0" title="First" aria-label="First">
          <i class="fas fa-chevron-left"></i>
          <i class="fas fa-chevron-left"></i> First </a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#0" title="Previous" aria-label="Previous">
          <i class="fas fa-chevron-left"></i> Previous </a>
      </li>
      <li class="pager-item d-none d-md-block text-center page-link">1</li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#2" title="1" aria-label="2">2</a>
      </li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#2" title="3" aria-label="3">3</a>
      </li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#3" title="4" aria-label="4">4</a>
      </li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#4" title="5" aria-label="5">5</a>
      </li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#5" title="6" aria-label="6">6</a>
      </li>
      <li class="mobile-pager d-md-none d-block text-center">Page 2 of 21</li>
      <li class="pager-item d-none d-md-block text-center">...</li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#20" title="21" aria-label="21">21</a>
      </li>
      <li class="pager-item">
        <a class="page-link" href="#2" title="Next" aria-label="Next">Next <i class="fas fa-chevron-right"></i>
        </a>
      </li>
      <li class="pager-item d-none d-md-block text-center">
        <a class="page-link" href="#20" title="Last" aria-label="Last">Last <i class="fas fa-chevron-right"></i>
          <i class="fas fa-chevron-right"></i>
        </a>
      </li>
    </ul>
  </div>
</nav>

When to use

Pagination should be used for:

• Displaying large amounts of related content that spans across multiple pages. For example, search results or forum posts.

Pagination should not be used for:

• Indicating progress, such as in a transaction.

• Replacing Navigation.