Pager

The standard pager used by views.

Pager displayed on first page.




Pager displayed on a "middle" page, and nine (max) pages.




Pager displayed on last page.

Markup Details
                            {{ attach_library('goizueta_theme/pager') }}

<h2>Pager displayed on first page.</h2>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pager__items js-pager__items">
    <li class="pager__item pager__item--first">
      <span class="pager__item--disabled"><span class="visually-hidden">Currently on first page'</span><span aria-hidden="true">«</span></span>
    </li>
    <li class="pager__item is-active">
      <a class="pager__page-link" href="?page=0" title="Current page"><span class="visually-hidden">Current page</span>1</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=1" title="Go to page 2"><span class="visually-hidden">Page</span>2</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=2" title="Go to page 3"><span class="visually-hidden">Page</span>3</a>
    </li>
    <li class="pager__item pager__item--last">
      <a href="?page=2" title="Go to last page"><span class="visually-hidden">Last page</span><span aria-hidden="true">»</span></a>
    </li>
  </ul>
</nav>
<br />
<br />
<br />
<h2>Pager displayed on a "middle" page, and nine (max) pages.</h2>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pager__items js-pager__items pager__items--many">
    <li class="pager__item pager__item--first">
      <a href="?page=0" title="Go to first page"><span class="visually-hidden">First page</span><span aria-hidden="true">«</span></a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=0" title="Go to page 1"><span class="visually-hidden">Page</span>1</a>
    </li>
    <li class="pager__item is-active">
      <a class="pager__page-link" href="?page=1" title="Current page"><span class="visually-hidden">Current page</span>2</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=2" title="Go to page 3"><span class="visually-hidden">Page</span>3</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=3" title="Go to page 4"><span class="visually-hidden">Page</span>4</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=4" title="Go to page 5"><span class="visually-hidden">Page</span>5</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=5" title="Go to page 6"><span class="visually-hidden">Page</span>6</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=6" title="Go to page 7"><span class="visually-hidden">Page</span>7</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=7" title="Go to page 8"><span class="visually-hidden">Page</span>8</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=8" title="Go to page 9"><span class="visually-hidden">Page</span>9</a>
    </li>
    <li class="pager__item pager__item--last">
      <a href="?page=8" title="Go to last page"><span class="visually-hidden">Last page</span><span aria-hidden="true">»</span></a>
    </li>
  </ul>
</nav>
<br />
<br />
<br />
<h2>Pager displayed on last page.</h2>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pager__items js-pager__items">
    <li class="pager__item pager__item--first">
      <a href="?page=0" title="Go to first page"><span class="visually-hidden">First page</span><span aria-hidden="true">«</span></a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=0" title="Go to page 1"><span class="visually-hidden">Page</span>1</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=1" title="Go to page 2"><span class="visually-hidden">Page</span>2</a>
    </li>
    <li class="pager__item is-active">
      <a class="pager__page-link" href="?page=2" title="Current page"><span class="visually-hidden">Current page</span>3</a>
    </li>
    <li class="pager__item pager__item--last">
      <span class="pager__item--disabled"><span class="visually-hidden">Currently on last page</span><span aria-hidden="true">»</span></span>
    </li>
  </ul>
</nav>