Skip to main content

Pagination

Purpose

Users need to navigate through pages of items.

Description

Collections of data are often split into multiple pages for performance reasons. Either the size of the data is too much to download at once, or the size of the data would take too long to render all at once. Pagination controls allow for the user to retrieve or view pages of data in a performant matter.

Basic functionality

This pagination pattern provides a few variations of the following features:

  • Navigating to prev/next pages
  • Navigating to first/last pages
  • Jumping to a manually entered page/item
  • Adjusting the number of items per page

The features should be chosen based on the user’s needs, the data, and the space available. Don’t include pagination features that aren’t necessary. If your users have no need to adjust the paging size or jump to a manually entered page for a particular type of data, don’t include those features.

Examples

The examples below show various configurations of pagination features.

Full pagination

The examples below show various configurations of pagination features. Depending on the data, you may treat your pages as pages Page 2 of 6.

Example HTML usage: 
<!--Full pagination-->
<nav class="pagination-bar" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a
        class="page-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#!"
      >
        <span>25 per page</span>
      </a>
      <div class="dropdown-menu" style="">
        <a class="dropdown-item" href="#">10 per page</a>
        <a class="dropdown-item active" href="#">25 per page</a>
        <a class="dropdown-item" href="#">50 per page</a>
        <a class="dropdown-item" href="#">75 per page</a>
        <a class="dropdown-item" href="#">100 per page</a>
      </div>
    </li>
  </ul>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">first_page</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_before</i>
      </a>
    </li>
    <li class="page-item">
      <span class="page-link page-go" href="#!"
        >Page
        <select name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
        of 6</span
      >
    </li>

    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_next</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">last_page</i>
      </a>
    </li>
  </ul>
</nav>
Example HTML usage: 
<!--Full pagination-->
<nav class="pagination-bar" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a
        class="page-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#!"
      >
        <span>25 per page</span>
      </a>
      <div class="dropdown-menu" style="">
        <a class="dropdown-item" href="#">10 per page</a>
        <a class="dropdown-item active" href="#">25 per page</a>
        <a class="dropdown-item" href="#">50 per page</a>
        <a class="dropdown-item" href="#">75 per page</a>
        <a class="dropdown-item" href="#">100 per page</a>
      </div>
    </li>
  </ul>

  <ul class="pagination">
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_before</i>
      </a>
    </li>
    <li class="page-item">
      <a
        class="page-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#!"
      >
        <span>15/25</span>
      </a>
      <div class="dropdown-menu" style="">
        <span class="ml-3">Jump to page</span>
        <div class="input-group ml-3" style="width: 125px">
          <input type="text" class="form-control" />
          <div class="input-group-append">
            <button class="btn btn-primary" type="button">Go</button>
          </div>
        </div>
      </div>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_next</i>
      </a>
    </li>
  </ul>
</nav>

Pagination

Example HTML usage: 
<!--Pagination-->

<ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#!">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">
    <a class="page-link" href="#!">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#!">Next</a>
  </li>
</ul>

Pagination with icons

Example HTML usage: 
<!--Pagination with icons-->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">first_page</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_before</i>
      </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">
      <a class="page-link" href="#!">3</a>
    </li>

    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_next</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">last_page</i>
      </a>
    </li>
  </ul>
</nav>
Example HTML usage: 
<!--Pagination with page input -->

<nav class="pagination-bar" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a
        class="page-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#!"
      >
        <span>25 per page</span>
      </a>
      <div class="dropdown-menu" style="">
        <a class="dropdown-item" href="#">10 per page</a>
        <a class="dropdown-item active" href="#">25 per page</a>
        <a class="dropdown-item" href="#">50 per page</a>
        <a class="dropdown-item" href="#">75 per page</a>
        <a class="dropdown-item" href="#">100 per page</a>
      </div>
    </li>
  </ul>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">first_page</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_before</i>
      </a>
    </li>
    <li class="page-item">
      <span class="page-link page-go" href="#!"
        >Page <input type="text" value="1" /> of 6</span
      >
    </li>

    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_next</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">last_page</i>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

Example HTML usage: 
<!--Pagination-->

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" 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 active" aria-current="page">
    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#!">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#!">Next</a>
  </li>
</ul>

Sizing

Add .pagination-lg or .pagination-sm for additional sizes.

Large pagination

Example HTML usage: 
<!--Pagination large-->
<nav class="pagination-bar pagination-lg" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a
        class="page-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#!"
      >
        <span>25 per page</span>
      </a>
      <div class="dropdown-menu" style="">
        <a class="dropdown-item" href="#">10 per page</a>
        <a class="dropdown-item active" href="#">25 per page</a>
        <a class="dropdown-item" href="#">50 per page</a>
        <a class="dropdown-item" href="#">75 per page</a>
        <a class="dropdown-item" href="#">100 per page</a>
      </div>
    </li>
  </ul>
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">first_page</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_before</i>
      </a>
    </li>
    <li class="page-item">
      <span class="page-link page-go" href="#!"
        >Page
        <select name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
        of 6</span
      >
    </li>

    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_next</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">last_page</i>
      </a>
    </li>
  </ul>
</nav>

Small pagination

Example HTML usage: 
<!--Pagination small-->
<nav class="pagination-bar" aria-label="Page navigation example">
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a
        class="page-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#!"
      >
        <span>25 per page</span>
      </a>
      <div class="dropdown-menu" style="">
        <a class="dropdown-item" href="#">10 per page</a>
        <a class="dropdown-item active" href="#">25 per page</a>
        <a class="dropdown-item" href="#">50 per page</a>
        <a class="dropdown-item" href="#">75 per page</a>
        <a class="dropdown-item" href="#">100 per page</a>
      </div>
    </li>
  </ul>
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">first_page</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_before</i>
      </a>
    </li>
    <li class="page-item">
      <span class="page-link page-go" href="#!"
        >Page
        <select name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
        of 6</span
      >
    </li>

    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">navigate_next</i>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link md-icon" href="#">
        <i class="material-icons">last_page</i>
      </a>
    </li>
  </ul>
</nav>

Example

Showing 5 of 25

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500