Pagination

Pagination indicates a series of related content that exists across multiple pages.Linear content flows — such as pages like this one — should almost never be broken up into multiple screens. It's better to show the full article on one long screen than to inflict the pain of additional steps on users when all they want to do is read a page, and thus stay within that one item.

Use when

Presenting the user with listings, such as categories, search results pages, archives and image galleries. In these cases the users goal is not to peruse the full list, but rather to find a specific item and click through to that destination page.
The users need a well prioritized list and are likely to find what they need close to the top. To focus users' attention and improve response time, you can start by showing a fairly short list, and then offer pagination options for progressing further down the list if needed.

Many users like to see all options on a single page, rather than clicking from page to page looking at products. In user testing, we have found a View All option to be helpful to some users. More important, the View All option usually doesn't bother users who don't use it. View All is particularly important for lists that cannot be sorted well, as well as for items that are more a question of individual taste than of specific attributes.

Alternatives

Infinite scrolling - is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. Continuous scrolling is useful for content that streams constantly and has a relatively flat structure, where each unit of content belongs at the same level of hierarchy and has similar chances of being interesting to users. Infinite scrolling is not recommended for goal-oriented finding tasks, such as having to locate specific content or compare options.

Basic design

					

<ul class="pagination">
   <li>
      <button class="go2first btn" disabled>Go to first page</button>
   </li>
   <li>
      <button class="prev btn" disabled>Previous page</button>
   </li>
   <li>
      <span>1</span>
   </li>
   <li>
      <span>of</span>
   </li>
   <li>
      <span>8</span>
   </li>
   <li>
      <button class="next btn">Next page</button>
   </li>
   <li>
      <button class="go2last btn">Go to last page</button>
   </li>
</ul>

Alternative design

For an alternative design to the pagination nav add .pagination-round to the pagination wrapper class.

					

<ul class="pagination pagination-round">
   <li>
      <button class="go2first btn" disabled>Go to first page</button>
   </li>
   <li>
      <button class="prev btn" disabled>Previous page</button>
   </li>
   <li>
      <span>1</span>
   </li>
   <li>
      <span>of</span>
   </li>
   <li>
      <span>8</span>
   </li>
   <li>
      <button class="next btn">Next page</button>
   </li>
   <li>
      <button class="go2last btn">Go to last page</button>
   </li>
</ul>

Showcase design Update

					

<ul class="pagination pagination-round">
   <li>
      <label for="quantityPerPage">Show per page:</label>
   </li>
   <li>
      <select name="perPage" id="quantityPerPage" class="quantity">
         <option value="24">24</option>
         <option value="52">24</option>
         <option value="75">24</option>
         <option selected value="100">24</option>
      </select>
   </li>
   <li>
      <b class="ml-8">100</b>
   </li>
   <li>
      <span>of</span>
   </li>
   <li>
      <b>729</b>
   </li>
   <li>
      <span class="mr-8">items</span>
   </li>
   <li>
      <button class="go2first btn" disabled>Go to first page</button>
   </li>
   <li>
      <button class="prev btn" disabled>Previous page</button>
   </li>
   <li>
      <button class="next btn">Next page</button>
   </li>
   <li>
      <button class="go2last btn">Go to last page</button>
   </li>
</ul>

					

<ul class="pagination pagination-round">
   <li>
      <label for="quantityPerPage">Show per page:</label>
   </li>
   <li>
      <select name="perPage" id="quantityPerPage" class="quantity mr-8">
         <option value="24">24</option>
         <option value="52">24</option>
         <option value="75">24</option>
         <option selected value="100">24</option>
      </select>
   </li>
   <li>
      <button class="go2first btn" disabled>Go to first page</button>
   </li>
   <li>
      <button class="prev btn" disabled>Previous page</button>
   </li>
   <li>
      <b class="ml-8">100</b>
   </li>
   <li>
      <span>of</span>
   </li>
   <li>
      <b>729</b>
   </li>
   <li>
      <span class="mr-8">items</span>
   </li>
   <li>
      <button class="next btn">Next page</button>
   </li>
   <li>
      <button class="go2last btn">Go to last page</button>
   </li>
   <li>
      <label class="ml-8" for="jumpToPage">Jump to page:</label>
   </li>
   <li>
      <input type="number" id="jumpToPage" name="pageJump" size="1" min="1" max="8">
   </li>
</ul>