Pagination markup is provided automatically by the {{pagination}}
helper. Since the release of version 2 of the templating API, numbered page links are no longer presented.
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-next">
<a class="pagination-next-link" rel="next nofollow">
<span class="pagination-next-text">Next</span>
<span class="pagination-next-icon" aria-hidden="true">›</span>
</a>
</li>
<li class="pagination-last">
<a class="pagination-last-link" href="#">
<span class="pagination-last-text">Last</span>
<span class="pagination-last-icon" aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Our themes have the pagination links (.pagination-next-link
, .pagination-prev-link
, .pagination-first-link
and .pagination-last-link
) inherit outline button styling by default.
For more information, please refer to the Zendesk Helpers page.
Customization
Because the pagination markup cannot be edited directly, the following Sass variables are available in the framework:
Variable | Description |
---|---|
$margin-pagination | The margin applied to the .pagination element. |