Pagination

Pagination links allow visitors to browse more than one page of objects when there are a large number of them to display.

Pagination links are provided by the Zendesk {{pagination}} helper, but changes are possible using HTML and CSS. 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.

Pagination links will only be displayed if there are more than 30 objects (categories, sections, articles etc.) to display.

Standard pagination links
View code
dfd88d44782cdeae3fd0a43263bf0bc05f95b7efe4403b8c02f30a7e3a754a00e163d42652e7ea2cdad8b4128d85b0f93e5c1a4c42850fa4f59fa551c8233759cc4c51e3b150adafde825e4685d6503fc2b2adff3d5243385072af914059080d3a6f17fbb02af4b15ae19bb01be0ac6663da39745d1f83d796461f1d210f2643c1ced711c2248e71e5b446524c6b133021b4f8cc5a8fe8332dfa5224250f516447e1776c32f0b5972d6755e3ab7e66b8f3568b6d8a9f91d6c4b9ad075a1c3148

You can edit the pagination styles directly in the theme’s style.css file or through the _pagination.scss Sass partial to give the links a different appearance. For example, you could apply the primary button style:

Pagination links as primary buttons
View code
df4a7212863bba5388b4280420cb6b839a4f6cb7c79329ac41d18d62c6cca16095d1f0e28fe129a7c3ac0cfd952d27622d0abf25421d79d39db72ed5ec7def211f4c26b05b92288dfab2216a7ac367f1dca43b4b00ef55498c9282d2623d392a608726520902aa8c8b0a389067eea6e12b8688517f3174020cd85259780a0acd687ca62a656410970d7d39b34eac8b06086d98ef770eca09efa2fd7af3a38dd557e605d31a513cde0e8bc9a04c46614e9a36b72e14d2df138e51b09fc11f6d8fc8a4752b05a89b4034c55e63a5f6c53e8b61d207cabbb2e983fc98c519f6c1b84dd2998a087fe339288d744a207edeac789c09d347b81f1a38f79798df89a5722ea4983cf021fa1a7220bf021fc538e7b8ca761898f2a160e8b531f6756e9fbe02a62172fd4b6508550a3086eacf8ed668c3805f26c55a6c0ec8c202cf50e314a81edc681c84f11052bdeec8b272a6246cb2d2708d714717b785bd091859ac1af7066da54bb4679adda26cba33802f0da1089d8c76fbc09f56704ffabf507738d913aa728cdb6f8f0ecc78d1b84e6a405c2fe9fa5c788540ba04ba1996e381a9dba478eb141a420c80d3428bdfdd29fbcad749c85844af9e73c85910d0b4112eec8731f735fa17001e7424f22a3bde66c767c7a3a25521cbfbfae7af81d52a8d8dc59b19f04a5f786306d3de1c34b01ee2b0033767d2de93dfb8d315afc8a29f260dc18e7776af70051148aab8cdd39ef7afb972efb9a8ce80d22a8fac0a4280445fb65a59ce22448c8d17813c27cedf6e744a8d922f382df95edc48714c0c7044aef0eed92750e195377188d41e46d4f8274816e0ca19fb375ff7e5d1c1cc7361d81b69d0feafe3ce8bb281d66644bcddc3b56c094af719de44ee53e4b836696848a5d02848a8548ac40f223ac10d101f17f440b8998ded69a86e3762557cba973ec0d8eee4ed186da2a35bf652e1c8730209cd9357175b773ebf538ce8f0194754a123a887e45556f89e90aeb046dd3ae6f937c9a782b123ec071bedccd4ba5fb8e94cf3515f28791201c10e6fe754ded3b68d4098458658b631d3d05f8bae9e02f79c291ff85f6823a81399e60a98c5c7f47bf0b0f1c7bdbce380286f4cd9ad7a37d9a61f4207fb966b9de19c054cc2cfd300fa9dd095fd80716548afe6a8d949d53318c5795903963b14940c0862e9caac1a2c0ab6ccbbbfe3e8008df3bf04652ae30c96ee761bbcd221f5748ead4b8ea7b6684a2267cfdff0efc565c7e8ecb00bdfc40620c63688f257b079287905dcda04842a4fce232b2e31ebe909fbddc47b3390729afe7ced15c36e52345df643b26c76ddeba933180bd3a7aacdc26bd9970781dae9e422e3c818cb4e353375fb36e3cb17a4bdad67b4f75b0e9c3d4f0cf68390f22ce2fc02950f3ce4c7047e577fd7071ee14925de1517d4bf52dc8a4341f1c0accf3af209ea1229238b25dcde9af14c97337c5530f1a63db99cf7f2e8e0add0acef0bace10de2bdcf2c3cdbd8adbc3489cc43dfe4a9987e69c0d6152297a8cfd78841b1c737458f0d6adecaa8ffec6227e27b1b8f6ab9bb40234a47161c05ddee39fedc66520bc12e6711bb6e3502b83b8a9ebe74c59ea1dc4b7e866264fafacf36f83753cbe7d606f8e3a3e316561f495de5c179cb073c8b464ad8014661881d7614586b4b88e31fbbbfefab74c4ae74fd423281de64c13ad357744f8a78b3846c4f2110761564647bfd888e17301bd252c8997b65f0cc565ec388a1b505ee5fb63641fa181e5de5d36bd82188ddf9e547035f6138639f545b129a8c7ad0b6aeaf95a785105d3e2dd9ca0674c94bba9e3a182ffd4b9dc20a1656c822d81c0e3cd06e0e1284ac4925666f51136d320ff934d0cc7fc101bb5dd5c20beb2f7d29fb8c93433650a47e818add4b8408464bd973d66cf17bbc43170001da41c31c1a5e595ef750509e2c0f67cf

The HTML for pagination links is provided by the Zendesk {{pagination}} helper and cannot be modified directly.

You can use pagination patterns by copying and pasting the code into the position you’d like them to appear on any page that supports the helper:

  • Home page
  • Article page
  • Contributions page
  • Request List page
  • Search Results page
  • Section page

Related patterns