Pattern library

Pagination

View full screen

Details

Source (Nunjucks)

<nav class="w-pagination">
{% if data.first %}
<a
class="w-pagination__link w-pagination__arrow w-pagination__arrow--first"
aria-label="First Page"
href="#"
>
</a>
{% endif %}
{% if data.previous %}
<a
class="w-pagination__link w-pagination__arrow w-pagination__arrow--previous"
aria-label="Previous Page"
href="#"
>
</a>
{% endif %}
{% for item in data.items %}
{% if item == '...' %}

<span class="w-pagination__spacer"></span>
{% else %}

<a
href="#"
class="w-pagination__link"
aria-label="Page {{ item }}"
{% if loop.index == 1 %}aria-current="page"{% endif %}
>{{ item}}
</a>
{% endif %}
{% endfor %}
{% if data.next %}
<a
href="#"
class="w-pagination__link w-pagination__arrow w-pagination__arrow--next"
aria-label="Next Page"
>

</a>
{% endif %}
{% if data.last %}
<a
href="#"
class="w-pagination__link w-pagination__arrow w-pagination__arrow--last"
aria-label="Last Page"
>
</a>
{% endif %}
</nav>

Output

<nav class="w-pagination">

<a
class="w-pagination__link w-pagination__arrow w-pagination__arrow--first"
aria-label="First Page"
href="#"
>
</a>


<a
class="w-pagination__link w-pagination__arrow w-pagination__arrow--previous"
aria-label="Previous Page"
href="#"
>
</a>




<a
href="#"
class="w-pagination__link"
aria-label="Page 1"
aria-current="page"
>
1
</a>




<a
href="#"
class="w-pagination__link"
aria-label="Page 2"

>
2
</a>




<a
href="#"
class="w-pagination__link"
aria-label="Page 3"

>
3
</a>




<a
href="#"
class="w-pagination__link"
aria-label="Page 4"

>
4
</a>




<span class="w-pagination__spacer"></span>




<a
href="#"
class="w-pagination__link"
aria-label="Page 13"

>
13
</a>



<a
href="#"
class="w-pagination__link w-pagination__arrow w-pagination__arrow--next"
aria-label="Next Page"
>

</a>


<a
href="#"
class="w-pagination__link w-pagination__arrow w-pagination__arrow--last"
aria-label="Last Page"
>
</a>

</nav>