Pagination

Code Examples

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.

Restrictions

  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("pagination-1", "pagination-2", "pagination-3", etc).

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.

Angular

The Pagination component in spark-core-angular consists of two Angular components:

  • sprk-pagination
  • sprk-unordered-list

The Pagination component expects you to supply data and click handlers as inputs.

<nav aria-label="Pagination Navigation" data-sprk-pagination="default" data-id="pagination-1">
  <ul class="sprk-c-Pagination sprk-o-HorizontalList sprk-o-HorizontalList--spacing-medium">
    <li>
      <a class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--disabled sprk-b-Link--plain" href="#" data-sprk-pagination="prev">
        <span class="sprk-u-ScreenReaderText">Prev</span>
        <svg class="sprk-c-Icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-left"></use>
        </svg>
      </a>
    </li>

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

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

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

    <li>
      <a class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain" href="#" data-sprk-pagination="next">
        <span class="sprk-u-ScreenReaderText">Next</span>
        <svg class="sprk-c-Icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-right"></use>
        </svg>
      </a>
    </li>
  </ul>
</nav>
          
<sprk-pagination paginationType="default" [currentPage]="1" nextLinkText="Next" prevLinkText="Prev" [totalItems]="3" [itemsPerPage]="1" (previousClick)="yourGoBackFunction($event)" (pageClick)="yourGoToPageFunction($event)" (nextClick)="yourGoForwardFunction($event)" idString="pagination-1">
</sprk-pagination>

Information

See below for available customization options:

Input Type Description
paginationType string The type of the pagination you would like. Can be 'default', 'pager', or 'long'.
nextLinkText string The value supplied will be used as the text of the next link.
prevLinkText string The value supplied will be used as the text of the previous link.
totalItems number This is the total number of items in the data to be used for pagination.
itemsPerPage number This is the total number of items to render per page.
analyticsStringFirstLink string The value supplied will be assigned to the 'data-analytics' attribute on the first link. Intended for an outside library to capture data.
analyticsStringSecondLink string The value supplied will be assigned to the 'data-analytics' attribute on the second link. Intended for an outside library to capture data.
analyticsStringThirdLink string The value supplied will be assigned to the 'data-analytics' attribute on the third link. Intended for an outside library to capture data.
analyticsStringLinkNext string The value supplied will be assigned to the 'data-analytics' attribute on the next link. Intended for an outside library to capture data.
analyticsStringLinkPrev string The value supplied will be assigned to the 'data-analytics' attribute on the previous link. Intended for an outside library to capture data.
additionalClasses string Allows a string of classes to add, in addition to the Spark classes. Intended for overrides.
previousClick function Supply a function to the previousClick input to run when the previous link is clicked. On click, previousClick will emit the click event and current page.
nextClick function Supply a function to the nextClick input to run when the next link is clicked. On click, nextClick will emit the click event and current page.
pageClick function Supply a function to the pageClick input to run when the individual page links are clicked. On click, pageClick will emit the click event and current page.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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.

Angular

The Long Pagination variant uses the same inputs as the default version except the paginationType should be set to 'long'.

<nav aria-label="Pagination Navigation" data-sprk-pagination="long" data-id="pagination-2">
  <ul class="sprk-c-Pagination sprk-o-HorizontalList sprk-o-HorizontalList--spacing-small">
    <li>
      <a class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain" href="#" data-sprk-pagination="prev">
        <span class="sprk-u-ScreenReaderText">Prev</span>
        <svg class="sprk-c-Icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-left"></use>
        </svg>
      </a>
    </li>

    <li>
      <a class="sprk-c-Pagination__link sprk-b-Link sprk-b-Link--plain" href="#" data-sprk-pagination="item">
        1
      </a>
    </li>

    <li class="sprk-u-pas" data-sprk-pagination="dots">
      ...
    </li>

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

    <li class="sprk-u-pas" data-sprk-pagination="dots">
      ...
    </li>

    <li>
      <a class="sprk-c-Pagination__link sprk-b-Link sprk-b-Link--plain" href="#" data-sprk-pagination="item">
        22
      </a>
    </li>

    <li>
      <a class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain" href="#" data-sprk-pagination="next">
        <svg class="sprk-c-Icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-right"></use>
        </svg>
      </a>
    </li>
  </ul>
</nav>
          
<sprk-pagination additionalClasses="sprk-u-mbl" paginationType="long" nextLinkText="Next" prevLinkText="Prev" [currentPage]="1" [totalItems]="100" [itemsPerPage]="25" (previousClick)="yourGoBackFunction($event)" (pageClick)="yourGoToPageFunction($event)" (nextClick)="yourGoForwardFunction($event)" idString="pagination-2">
</sprk-pagination>

Pager

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

Angular

The Pager Pagination variant uses the same inputs as the default version except the paginationType should be set to 'pager'.

<nav aria-label="Pagination Navigation" data-id="pagination-3">
  <ul class="sprk-c-Pagination sprk-o-HorizontalList sprk-o-HorizontalList--spacing-large">
    <li>
      <a class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain" href="">
        <svg class="sprk-c-Icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-left"></use>
        </svg>
        <span class="sprk-u-ScreenReaderText">Prev</span>
      </a>
    </li>

    <li>
      <a class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain" href="">
        <svg class="sprk-c-Icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-right"></use>
        </svg>
        <span class="sprk-u-ScreenReaderText">Next</span>
      </a>
    </li>
  </ul>
</nav>
          
<sprk-pagination paginationType="pager" nextLinkText="Next" prevLinkText="Prev" [currentPage]="1" [totalItems]="40" [itemsPerPage]="10" (previousClick)="yourGoBack($event)" (pageClick)="yourGoToPage($event)" (nextClick)="yourGoForward($event)" idString="pagination-3">
</sprk-pagination>