Pagination

The Pagination component is comprised of a previous link, a next page link, and page number links. Use a Pagination component when you need a way to separate a large portion of content into smaller portions. It serves as navigation and informs users where they currently are and where they can go in the future.

Information

  • Spark-Core Pagination JS will take care of adding in the correct aria-label to each link on first page load and when the items are tapped or clicked.

Default

This is the pattern for when you have three or fewer pages. All three page numbers and prev/next links that appear in the pagination are clickable. The current page number should be bold and have a background color. When the Next link is tapped or clicked the next sequential page is shown and the background color should be removed from the current page number and shown on the next sequential page number. The opposite is true for the Prev link. If the first or last page are selected then the previous or next links should be disabled respectively.

<nav aria-label="Pagination Navigation" data-sprk-pagination="default">
  <ul class="sprk-c-Pagination sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-Pagination__item">
      <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--disabled" href="#" data-sprk-pagination="prev">
        Prev
      </a>
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--current">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item" aria-current="true">
        1
      </a>
    </li>

    <li class="sprk-c-Pagination__item">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
        2
      </a>
    </li>

    <li class="sprk-c-Pagination__item">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
        3
      </a>
    </li>

    <li class="sprk-c-Pagination__item">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="next">
        Next
      </a>
    </li>
  </ul>
</nav>

Long Pagination

This pattern is for when you have more than three pages of content. When the next or previous links are tapped or clicked the page number decreases or increases respectively. When the user is on the first page the previous link should be disabled. When the user is on the last page the next link should be disabled. The current page should always be bold and highlighted by a background color.

<nav aria-label="Pagination Navigation" data-sprk-pagination="long">
  <ul class="sprk-c-Pagination sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="prev">
        Prev
      </a>
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
        1
      </a>
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long" data-sprk-pagination="dots">
      ...
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long sprk-c-Pagination__item--current">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" aria-current="true" data-sprk-pagination="item">
        11
      </a>
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long" data-sprk-pagination="dots">
      ...
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
        22
      </a>
    </li>

    <li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="next">
        Next
      </a>
    </li>
  </ul>
</nav>

Pager

Use this pattern in the case where you need pagination but there is no need to show page numbers.

<nav aria-label="Pagination Navigation">
  <ul class="sprk-c-Pagination sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-Pagination__item">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="">
        Prev
      </a>
    </li>

    <li class="sprk-c-Pagination__item">
      <a class="sprk-b-Link sprk-b-Link--standalone" href="">
        Next
      </a>
    </li>
  </ul>
</nav>