Pagination

Pagination indicates to a user that a list of items has been split in to multiple pages.  

Default

Users can click the next and back links to navigate. Clicking on a page number will take you to the selected page. 

<div class="nsw-container">
  <nav aria-label="Pagination">
    <ul class="nsw-pagination">
      <li class="nsw-pagination__item nsw-pagination__item--prev-page">
        <a class="nsw-pagination__link" href="#">
          <svg class="nsw-icon nsw-pagination__arrows" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
          <span class="nsw-pagination__text">
            Back <span class="sr-only">a page</span>
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>1
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>2
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item nsw-pagination__item--is-active">
        <a class="nsw-pagination__link is-current" href="#" aria-current="page">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>3
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>4
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            &hellip;
            <span class="sr-only">Page 5</span>
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>12
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item nsw-pagination__item--next-page">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            Next <span class="sr-only">page</span>
          </span>
          <svg class="nsw-icon nsw-pagination__arrows" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
        </a>
      </li>
    </ul>
  </nav>
  
  <nav aria-label="Pagination">
    <ul class="nsw-pagination">
      <li class="nsw-pagination__item nsw-pagination__item--prev-page">
        <span class="nsw-pagination__link is-disabled">
          <svg class="nsw-icon nsw-pagination__arrows" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
          <span class="nsw-pagination__text">
            Back <span class="sr-only">a page</span>
          </span>
        </span>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>1
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>2
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item nsw-pagination__item--is-active">
        <a class="nsw-pagination__link is-current" href="#" aria-current="page">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>3
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>4
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            &hellip;
            <span class="sr-only">Page 5</span>
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>12
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item nsw-pagination__item--next-page">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            Next <span class="sr-only">page</span>
          </span>
          <svg class="nsw-icon nsw-pagination__arrows" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
        </a>
      </li>
    </ul>
  </nav>
</div>

 

Copy

Pagination separates large lists of content, such as search results into smaller lists that are easier to interact with.  

Pagination allows users to see how many pages there are, which page you are currently viewing, and how to navigate to other pages. 

Use when you have too much content to display in a single list, such as search results or an index. 

The pattern provides the visual assets required for pagination. The business rules required to display the content will be defined by the individual technology the product or service is being delivered through.