Handlebars template adapted from collections, but markup more like WP because it has more a11y.
Icons included here from sprite-sheet, but they could be inlined.
TODO:
- change WP markup
- get ellipsis rules from collections
<div class="c-pagination">
<nav class="c-pagination__links" aria-label="Pagination">
<a class="c-pagination__page c-pagination__page--prev" href=""><span class="u-icon"><svg>
<use xlink:href="../../assets/icons/sprite.symbol.svg#arrow-left" />
</svg></span>Previous</a>
<a class="c-pagination__page" href="#1">1</a>
<a class="c-pagination__page" href="#2">2</a>
<a class="c-pagination__page" href="#3">3</a>
<span aria-current="page" class="c-pagination__page"><span class="u-visually-hidden">You're on page</span>
4</span>
</nav>
</div>
<div class="c-pagination">
<nav class="c-pagination__links" aria-label="Pagination">
{{#if pagination.isFirst}}
{{else}}
<a class="c-pagination__page c-pagination__page--prev" href="{{pagination.links.prev}}"><span class="u-icon"><svg>
<use xlink:href="{{path '/assets/icons/sprite.symbol.svg#arrow-left'}}" /></svg></span>Previous</a>
{{/if}}
{{#each pagination.links.pages}}
{{#if this}}
{{#if this.isCurrent}}
<span aria-current="page" class="c-pagination__page"><span class="u-visually-hidden">You're on page</span>
{{this.pageNumber}}</span>
{{else}}
<a class="c-pagination__page" href="#{{this.pageNumber}}">{{this.pageNumber}}</a>
{{/if}}
{{else}}
<span class="c-pagination__page c-pagination__ellipsis"></span>
{{/if}}
{{/each}}
{{#if pagination.isLast}}
{{else}}
<a class="c-pagination__page--next c-pagination__page" href="{{pagination.links.next}}">Next<span
class="u-icon"><svg>
<use xlink:href="{{path '/assets/icons/sprite.symbol.svg#arrow-right'}}" /></svg></span></a>
{{/if}}
</nav>
</div>