Pagination

Pagination lets users navigate through multiple pages of content.

Pagination

Used to help users navigate through multiples pages of content.

Short



HTML

<div class="pagination">
  <ul class="pagination-list">
    <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
    <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
    <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
  </ul>
</div>


Truncated



HTML

<div class="pagination">
  <div class="pagination-mobile">
    <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
      <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>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <span>of 10 pages</span>
  </div>
  <ul class="pagination-list">
    <li class="pagination-item pagination-item-prev pagination-item-disabled">
      <a href="#" class="pagination-link"><i class="fa-solid fa-chevron-left"></i></a>
    </li>
    <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
    <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
    <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
    <li class="pagination-item pagination-item-dots">
      <button class="pagination-link"><i class="fa-solid fa-ellipsis"></i></button>
      <ul class="sub-pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
      </ul>
    </li>
    <li class="pagination-item"><a href="#" class="pagination-link">10</a></li>
    <li class="pagination-item pagination-item-next">
    <a href="#" class="pagination-link"><i class="fa-solid fa-chevron-right"></i></a></li>
  </ul>
</div>


Mobile





Table Pagination Desktop



HTML

<div class="pagination pagination-space-between">
  <a href="#" class="btn btn-simple">Prev</a>
  <div class="pagination-mobile">
    <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
      <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>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <span>of 10 pages</span>
  </div>
  <ul class="pagination-list">
    <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
    <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
    <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
    <li class="pagination-item pagination-item-dots">
      <button class="pagination-link"><i class="fa-solid fa-ellipsis"></i></button>
      <ul class="sub-pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
      </ul>
    </li>
    <li class="pagination-item"><a href="#" class="pagination-link">9</a></li>
  </ul>
  <a href="#" class="btn btn-simple">Next</a>
</div>


Table Pagination Mobile





Page Count



HTML

<div class="pagination">
  <span>Items per page</span> 
  <a href="#" class="btn btn-simple">Simple Button</a>
</div>



HTML

<div class="pagination">
  <a href="#" class="btn btn-simple">Simple Button</a>
  <span>Items per page</span> 
</div>



Placement



HTML

<div class="pagination pagination-space-between pagination-border">
  <div class="pagination-counter">
    <a href="#" class="btn btn-simple">Simple Button</a>
    <span>Items per page</span> 
  </div>
  <div class="pagination-mobile">
    <select name="pagination-table-mobile" id="pagination-table-mobile" class="pagination-select">
      <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>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <span>of 10 pages</span>
  </div>
  <ul class="pagination-list">
    <li class="pagination-item pagination-item-prev pagination-item-disabled">
      <a href="#" class="pagination-link"><i class="fa-solid fa-chevron-left"></i></a>
    </li>
    <li class="pagination-item"><a href="#" class="pagination-link">1</a></li>
    <li class="pagination-item pagination-item-current"><span class="pagination-link">2</span></li>
    <li class="pagination-item"><a href="#" class="pagination-link">3</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">4</a></li>
    <li class="pagination-item"><a href="#" class="pagination-link">5</a></li>
    <li class="pagination-item pagination-item-dots">
      <button class="pagination-link"><i class="fa-solid fa-ellipsis"></i></button>
      <ul class="sub-pagination-list">
        <li class="pagination-item"><a href="#" class="pagination-link">6</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">7</a></li>
        <li class="pagination-item"><a href="#" class="pagination-link">8</a></li>
      </ul>
    </li>
    <li class="pagination-item"><a href="#" class="pagination-link">10</a></li>
    <li class="pagination-item pagination-item-next">
      <<a href="#" class="pagination-link"><i class="fa-solid fa-chevron-right"></i></a>
    </li>
  </ul>
</div>