Sections

Content

Layout

Navigation

Pagination

Pagination links allow visitors to navigate between pages of content.

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.