Pagination - Component

The pagination pattern is a simple grid-based layout that shows a visual, presentation-only status.

Code

Source (Nunjucks)

<nav class="pagination" aria-label="Pagination {{ data.statusText }}">
  <div class="pagination__container">
  {% if data.prev %}
    <a class="button" href="#">{{ data.prev }}</a>
  {% endif %}
  </div>
  <div class="pagination__status" role="presentation" aria-hidden="true">
    {{ data.statusText }}
  </div>
  <div class="pagination__container">
  {% if data.next %}
    <a class="button" href="#">{{ data.next }}</a>
  {% endif %}
  </div>
</nav>

Output

<nav class="pagination" aria-label="Pagination Page 3 of 17">
  <div class="pagination__container">
    <a class="button" href="#">Newer posts</a>
  </div>
  <div class="pagination__status" role="presentation" aria-hidden="true">
    Page 3 of 17
  </div>
  <div class="pagination__container">
    <a class="button" href="#">Older posts</a>
  </div>
</nav>

Information

The .pagination__container elements aren't necessarily required, but they assist with the visual layout.

For example, if there is no previous control, the status will still be central and the next control will be pushed out to the end still, if you use the .pagination__container elements.

Key links

Sass File

Variants

No previous

View full screen

Code

Source (Nunjucks)

<nav class="pagination" aria-label="Pagination {{ data.statusText }}">
  <div class="pagination__container">
  {% if data.prev %}
    <a class="button" href="#">{{ data.prev }}</a>
  {% endif %}
  </div>
  <div class="pagination__status" role="presentation" aria-hidden="true">
    {{ data.statusText }}
  </div>
  <div class="pagination__container">
  {% if data.next %}
    <a class="button" href="#">{{ data.next }}</a>
  {% endif %}
  </div>
</nav>

Output

<nav class="pagination" aria-label="Pagination Page 3 of 17">
  <div class="pagination__container">
    <a class="button" href="#">Newer posts</a>
  </div>
  <div class="pagination__status" role="presentation" aria-hidden="true">
    Page 3 of 17
  </div>
  <div class="pagination__container"></div>
</nav>

No previous

View full screen

Code

Source (Nunjucks)

<nav class="pagination" aria-label="Pagination {{ data.statusText }}">
  <div class="pagination__container">
  {% if data.prev %}
    <a class="button" href="#">{{ data.prev }}</a>
  {% endif %}
  </div>
  <div class="pagination__status" role="presentation" aria-hidden="true">
    {{ data.statusText }}
  </div>
  <div class="pagination__container">
  {% if data.next %}
    <a class="button" href="#">{{ data.next }}</a>
  {% endif %}
  </div>
</nav>

Output

<nav class="pagination" aria-label="Pagination Page 3 of 17">
  <div class="pagination__container"></div>
  <div class="pagination__status" role="presentation" aria-hidden="true">
    Page 3 of 17
  </div>
  <div class="pagination__container">
    <a class="button" href="#">Older posts</a>
  </div>
</nav>