Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.


nav(aria-label='Page navigation')
  ul.pagination
    li
      a(href='#', aria-label='Previous')
        span(aria-hidden='true') «
    li
      a(href='#') 1
    li
      a(href='#') 2
    li
      a(href='#') 3
    li
      a(href='#') 4
    li
      a(href='#') 5
    li
      a(href='#', aria-label='Next')
        span(aria-hidden='true') »


<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Labelling the pagination component

The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive aria-label for the <nav> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.


nav(aria-label='...')
  ul.pagination
    li.disabled
      a(href='#', aria-label='Previous')
        span(aria-hidden='true') «
    li.active
      a(href='#')
        | 1
        span.sr-only (current)


<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  </ul>
</nav>

We recommend that you swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.


nav(aria-label='...')
  ul.pagination
    li.disabled
      span
        span(aria-hidden='true') «
    li.active
      span
        | 1
        span.sr-only (current)


<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
  </ul>
</nav>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.


nav(aria-label='...')
  ul.pagination.pagination-lg ...
nav(aria-label='...')
  ul.pagination ...
nav(aria-label='...')
  ul.pagination.pagination-sm ...


<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.


nav(aria-label='...')
  ul.pager
    li
      a(href='#') Previous
    li
      a(href='#') Next


<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Aligned links

Alternatively, you can align each link to the sides:


nav(aria-label='...')
  ul.pager
    li.previous
      a(href='#')
        span(aria-hidden='true') ←
        |  Older
    li.next
      a(href='#')
        | Newer
        span(aria-hidden='true') →



<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.


nav(aria-label='...')
  ul.pager
    li.previous.disabled
      a(href='#')
        span(aria-hidden='true') ←
        |  Older
    li.next
      a(href='#')
        | Newer
        span(aria-hidden='true') →


<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>