Navigation

Pager

The pager allows the user to navigate through multiple pages of search results.

<nav class="occlss-pager" aria-labelledby="pagination-heading">
  <strong id="pagination-heading" class="occlss-u-visuallyhidden">Pagination</strong>
  <ul class="occlss-pager__items js-pager__items">
    <li class="occlss-pager__item occlss-pager__item--first">
      <a href="?combine=&amp;page=0" title="Go to first page" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">First page</span>
        <span aria-hidden="true">First</span>
      </a>
    </li>
    <li class="occlss-pager__item occlss-pager__item--previous">
      <a href="?combine=&amp;page=5" title="Go to previous page" rel="prev" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">Previous page</span>
        <span aria-hidden="true">Previous</span>
      </a>
    </li>
    <li class="occlss-pager__item occlss-pager__item--ellipsis" role="presentation"></li>
    <li class="occlss-pager__item">
      <a href="?combine=&amp;page=4" title="Go to page 5" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">
          Page
        </span>5</a>
    </li>
    <li class="occlss-pager__item">
      <a href="?combine=&amp;page=5" title="Go to page 6" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">
          Page
        </span>6</a>
    </li>
    <li class="occlss-pager__item is-active">
      <a href="?combine=&amp;page=6" title="Current page" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">
          Current page
        </span>7</a>
    </li>
    <li class="occlss-pager__item">
      <a href="?combine=&amp;page=7" title="Go to page 8" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">
          Page
        </span>8</a>
    </li>
    <li class="occlss-pager__item">
      <a href="?combine=&amp;page=8" title="Go to page 9" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">
          Page
        </span>9</a>
    </li>
    <li class="occlss-pager__item occlss-pager__item--ellipsis" role="presentation"></li>
    <li class="occlss-pager__item occlss-pager__item--next">
      <a href="?combine=&amp;page=7" title="Go to next page" rel="next" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">Next page</span>
        <span aria-hidden="true">Next</span>
      </a>
    </li>
    <li class="occlss-pager__item occlss-pager__item--last">
      <a href="?combine=&amp;page=15" title="Go to last page" class="occlss-pager__link">
        <span class="occlss-u-visuallyhidden">Last page</span>
        <span aria-hidden="true">Last</span>
      </a>
    </li>
  </ul>
</nav>

Changelog

2.4.2

  • Colour for selected item fix

2.2.0

  • Heading changed to strong from h4

1.0.0

  • Component added