Skip Navigation

Pagination and View More

Pagination & View More are controls that allow users to view additional records within a data set.

View More


When to Use

  • View More is the preferred method for displaying records from a large data set in a progressive manner.

When Not to Use

  • Technology limitations or the need to allow users to navigate to specific subsets of data may drive the need Pagination to be used.

Variations

Usage

  • View more is the preferred control for allowing users to view additional results within a large data set and should be used in most contexts.
  • For optimal ease of use, the View More button may be combined with lazy loading (automatically displaying additional results as the user scrolls down the screen). For example, start by displaying 10-30 results and when the user scrolls to the end of this set, begin displaying additional results (in a similar increment of 10-30). After two-three automatic displays, the View More button should appear to confirm the user’s intention. This allows for performance optimization while maintaining the user’s ability to access content that may appear below the result set.
  • It is also recommended that the number indicate the number of additional results, for example: “Load 10 more results.” An option to “View All Results” may also be used for smaller data sets.
  • When using View More, a Scroll to Top button should be used to allow users to easily return to the top of the screen.

Variations

View More with Lazy Load


Loading More...
No More Results

When to Use

  • This combination is best for contexts in which users are in an exploratory mode and when it is not critical for them the navigate to a specific subset of results.

Pagination



When to Use

  • When there are technology limitations or legacy formats that require a page refresh to load additional results/content.
  • When users may need to navigate/link to a specific page of results in the set.

Additional Information

Pagination may include up to three sections:

  • Page numbers and navigation arrows (required)
  • Current range and total number of results (recommended)
  • Number of results per page (optional)

To conserve space on mobile, the pagination numbers can range from 2 to 5 page numbers.

If there is a only one page of results (but additional results could display based on search criteria), there should still be a pagination mechanism.

Developer Notes

View More

<button data-action="view-more-example2" class="spark-btn spark-btn--md spark-btn--view-more">Load More Results</button>

  <script type="text/javascript">
    'use strict';

    var ViewMoreExample2 = {
      createProgressMeter: function(example){
        // Init Progress meter
        var progressMeterHTML =  '<progress></progress>'+
        '<span class="spark-progress__meter"></span>'+
        'Loading ';
        if(example.getAttribute('data-result-length'))
          progressMeterHTML += example.getAttribute('data-result-length');
        progressMeterHTML += ' Results...';
        return progressMeterHTML;
      },

      mockNetworkCall: function(example){
      // Save original button state
        var orig = example.innerHTML;
        var origClasses = example.className;

      // Switch to progress meter, simulates the active state of a network request
        example.className += ' spark-progress active';
        example.innerHTML = ViewMoreExample2.createProgressMeter(example);

      // Revert back after timeout, to simulate a completed network request
        window.setTimeout(function(){
          example.className = origClasses;
          example.innerHTML = orig;
        }, 3000);
      }
    };

    // Wait for page to finish loading
    document.addEventListener('DOMContentLoaded', function() {

    // Click Listener Event
      function addClickListner(example) {
        example.addEventListener('click', function(e){
          e.preventDefault();
          // Make sure button is not in active state
          if(e.target.className.indexOf('active') < 0) {
            // Simulate a network call
            ViewMoreExample2.mockNetworkCall(e.target);
          }
        }, false);
      }

    // Target buttons
      var viewMoreExamples = document.querySelectorAll('[data-action="view-more-example2"]');
      for (var i = viewMoreExamples.length - 1; i >= 0; i--) {
        addClickListner(viewMoreExamples[i]);
      }
    });
  </script>

<style type="text/css">
  
</style>

Adding the spark-btn--view-more class to the button will override the default button styling.

When making your network call to load more content in, you will need to add a Progress Indicator to the button. The example shows how a mock connection might work. The button is changed during the network request, and then reverted to it’s original state once the request is complete.

View More with Lazy Load

Loading More...
No More Results 
<button data-action="view-more-example4" class="spark-btn spark-btn--md spark-btn--view-more">Load More Results</button>

<hr />

<div class="spark-progress spark-progress--horizontal spark-progress--xs spark-progress--lazy-load" role="progressbar">
  <progress></progress>
  <span class="spark-progress__text" role="status">Loading More...</span>
  <span class="spark-progress__meter"></span>
</div>

<hr />

<div class="spark-progress spark-progress--horizontal spark-progress--xs spark-progress--lazy-load spark-progress--disabled" role="progressbar">
  <progress></progress>
  <span class="spark-progress__text" role="status">No More Results</span>
  <span class="spark-progress__meter"></span>
</div>

<style type="text/css">
  
</style>

Adding the spark-progress--lazy-load class will alter the progress indicator to the lazy load style.

Adding the spark-progress--disabled will hide the progress meter and change the text to a disabled style, when there are no more results to load.

Pagination

<nav class="spark-pagination" aria-label="Pagination navigation">

  <div class="spark-pagination__pages">
    <span class="spark-pagination__arrow spark-pagination__arrow--previous disabled" aria-label="Previous page">
      <span class="spark-pagination__arrow-text">Previous</span>
    </span>
    <a class="spark-pagination__item spark-pagination__item--active" aria-current="true"  aria-label="Go to page 1" href="#">
      1
    </a>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 2">
      2
    </a>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 3">
      3
    </a>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 4">
      4
    </a>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 5">
      5
    </a>
    <a class="spark-pagination__arrow spark-pagination__arrow--next" href="#" aria-label="Next page">
      <span class="spark-pagination__arrow-text">Next</span>
    </a>
  </div>

  <div class="spark-pagination__results">

    <div class="spark-pagination__per-page">
      <label class=" spark-select spark-select--no-label">
        <select class="spark-select__input" title="Results Per Page">
          <option>10 results</option>
          <option>25 results</option>
          <option>50 results</option>
          <option>100 results</option>
        </select>
        <span class="spark-label"></span>
      </label>
    </div>

    <div class="spark-pagination__summary">
      1-10 of 147 results
    </div>

  </div>

</nav>

<style type="text/css">
  
</style>

The pagination component consists of three parts: the page list, the results per-page select input, and the total results count.

At the start and end of the page list should be a next and previous arrow, respectively. Any text contained inside the .spark-pagination__arrow-text element will be hidden at the extra small breakpoint.

Each item in the page list should be given a class of spark-pagination__item. The active item should receive an additional class of spark-pagination__item--active.

The results per-page select input uses the special “no label” version of the select input by adding the spark-select--no-label class.

Truncated Example

<nav class="spark-pagination" aria-label="Pagination navigation">

  <div class="spark-pagination__pages">
    <a class="spark-pagination__arrow spark-pagination__arrow--previous" href="#" aria-label="Previous page">
      <span class="spark-pagination__arrow-text">Previous</span>
    </a>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 1">
      1
    </a>
    <span class="spark-pagination__ellipsis">
      ...
    </span>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 7">
      7
    </a>
    <a class="spark-pagination__item spark-pagination__item--active" href="#" aria-label="Go to page 8" aria-current="true">
      8
    </a>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 9">
      9
    </a>
    <span class="spark-pagination__ellipsis">
      ...
    </span>
    <a class="spark-pagination__item" href="#" aria-label="Go to page 12">
      12
    </a>
    <a class="spark-pagination__arrow spark-pagination__arrow--next" href="#" aria-label="Next page">
      <span class="spark-pagination__arrow-text">Next</span>
    </a>
  </div>

  <div class="spark-pagination__results">

    <div class="spark-pagination__per-page">
      <label class=" spark-select spark-select--no-label">
        <select class="spark-select__input" title="Results Per Page">
          <option>10 results</option>
          <option>25 results</option>
          <option>50 results</option>
          <option>100 results</option>
        </select>
        <span class="spark-label" aria-label="Select Number of Results Per Page"></span>
      </label>
    </div>

    <div class="spark-pagination__summary">
      1-10 of 147 results
    </div>

  </div>

</nav>

<style type="text/css">
  
</style>

When there are too many items to show in the page list, additional elements with the class spark-pagination__ellipsis should be used as a wrapper form a set of three dots. Always make sure you show the first and last item of the list.

Accessibility Notes

Pagination links may require additional context to provide users of assistive devices the proper information to successfully navigate your product or site. With that in mind, the examples provided include aria-labels on the <nav> and <a> elements to provide more context. An aria-current attribute has also been added to the current page link to indicate that it is the current page the user is on. Ensure that these attributes are added to your implementation and changed to the appropriate values