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
24d13a4d69280f814d7a1268467e1e2b85d35cfa0ff91bc389af51af803819e562ff29f6ea96ecd79e6f355e8d0acc3f770ead955350021e819ee40fea262e6bd9fd429620a43a66c75b3a9db69b2708042fb1c69f8efe153c3f6b6cf99cb0e237656d95328ea653854eca0474906b2574163c2d9315c6e28d9427cdc4541e7b89b044e8bbe06245d313afaf1000be86a66213c1536e4dd46f68c33be5ca9a50fc50b95f0e81eda2a0bbd2b7a4e9e2996f53827dddddf34c6dbedc32c18bef32

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
11d0d3fb27ca474349b1d98b1dbd4e63095226ef32efb32df77dd7fe9301ed8741f2946243bab3a423883e3de7dc85cb74ed2b08dba06f8e4c6ce4b2c98067e80afbc07f4169e1abc6b445e83227eac14040b5281dca70b1f591002e4d737e1d64b0a9d14f91a6a4e5383d6f3938f75bae16b218084dc0bafc937238199cbae270787b60167761aa6d63fa993c6e26c4b8207b0c5f9c4ac672bb60cbf051efe68c3a0bac032086ebf76510b691ca0cb60d09a156ec3f3536e5e6cb6ef42575f4b3d57072f2871c0c83deecda03e9f8da910c7baf49de6429206bd46c4a875ee9125937bf4e768b3073fbeb6ee668bacb25a024cea18642f484e1889294d363778635cee64f73cea1cecfb4f918695df03c2fe0a02c48a13ee0313c0199f59facdee4a18dee59be22c12dc03c1f7571ac956801be729ca5547c0668e6bf478bcdc3bdcf732ea432849c83835ae64035bbdf0c231fb8605a5ed636b5e76630b90ed0416805d610caf3840ab3d9e379738d20af962ba3cfd58f86626bf186dc499466dd6c76300badabd6ec570befd8352851b9e13f1c09934eb617a9b4d48eea99a4271a456748dfdd0496346408859fc6bf61ac0f5de79901e0f5ab93ad880079f2dad552bd7e254c0729ec44fe49578139f1e2b10b881c6bdbbffa6f618c937ff31634de2fc0f533b25aafb460f4b021792898899b9af9da848046d282b72c7213a157d7026c690b6c05d252c873d0362b5bd2fa1c4f730be35498b6ff49587d71151e3dbd816d66dc8302826b982dedcf03f1f7323957d59e1580f2502c6cdef7219d91b019a1d659b720e937b12ea1621c16c71de5db154eb8c9fb6d91a7a90afc501ecd170c06e9dd1ce66e7e88e4da5b24f4d0017ce2deaf57ddbf988333e93fcfe6904cceff2d3bd7c3fabceb832f3bf50648445b1b6d3afea924a291cd5c4f92831b81bf8cadfaa454401c36daab20d79f186683797f5141344edb77d85778a1f84ea58a9161fcfe68c974719f4f9f7126afd729b3d5c5f9c94460d4e19dcb6aa38d864da339faabe473426140866e4d9c428b3ecb815758cdd0c4f2cd136d9ec902fdc053bf7dfa3497a9c8dd03807670fc6fbeb606a41e7dbc0912e4fbde2ea475dc4dc7048fb8e7e5362c42b85c5d8b5037030ba00dd6cd98f837fe00ca5308be216f9056fa9e42b1b8a10258074535e09eb6545a78dfb530a9048be887c2df5bf7425237c14f1ae424ca5a65eeeba0e4328f3e122759a56b700f55c02cea95983524cd2c255af8391cbb8b76985e7d1b79e3d1762806125a0988479abf27fbff663beb6ec3ee5fddd05d368f47f37cf1623d98415e3b8f9ca344636c18fc13d504ecf73392e7f87723ca8782b010fa350c3f6113e2a797dd4aff36074920b4f118eed24533db9b38614ef093235a4ab6c6348ea19276afa567a4ac8a74ad5434400b3483259cf6ef628a5f7d14eedf8dd096f5124525cbfa8269bc474d9fb450d5fbd2c997550fa4b5ad77232991e82c91e8b648fff0364f1a71ed3f65762459b6c9fb37f949e2b12ebb549c0e23a7a7bf9c5ffdc309026028f3960da298f35fb3fb4655b172fdc9e06cd53ca6a5c9d6455ee15b0efdf14aa53f066b3f77401756f7e182e574dc83d04dc13373daa35c05be911bc50e6e743b48b1dd6f33abd2f295ef16e18b4f67e7bacbb7172fc76847a3420179a21838a76916f6724999b99c93849797e0a4bf2fdf1926752a115a81995a35bced03f3f3484a8a497aae90c44a66dba748ea53ed6e90176ce2c71cf3b78cfb7d917dfd0dcbd67ecab949564e2669111d673b8527757d6fb52fc816c4ecf64898d61975e67782cf612211fe2db6eb47851608b6e0bfa5b5bd29a0774a8c34daea36daefbb0628fb9d0867ba91728c0f61a6d3a805c7ff26e27d81f0ab3a42ed895c5b9c67afe844df81b305483df5391535aca9834162

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