GNWT Base Theme Style Guide

5.5 navigation.pager Pager

Toggle example guides Toggle HTML markup

Paged navigation is a list of page numbers when more than 1 page of content is available.

Markup: navigation/pager/pager.twig
<ul class="pager {{modifier_class}}">
  <li class="pager__item pager-first">
    <a title="Go to first page" href="/admin/content">« first</a>
  </li>
  <li class="pager__item pager-previous">
    <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 1" href="/admin/content">1</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 2" href="/admin/content?page=1">2</a>
  </li>
  <li class="pager-current">3</li>
  <li class="pager__item">
    <a title="Go to page 4" href="/admin/content?page=3">4</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 5" href="/admin/content?page=4">5</a>
  </li>
  <li class="pager__item pager-next">
    <a title="Go to next page" href="/admin/content?page=3">next ›</a>
  </li>
  <li class="pager__item pager-last">
    <a title="Go to last page" href="/admin/content?page=4">last »</a>
  </li>
</ul>
Source: sass/navigation/pager/_pager.scss, line 1