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>