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
b97872239b0b633dcf8c856c33bc8a12027ba1917196d0d6a501265a2cdead955ba1dcb884623d678e2d498084b5e6e36ca29e063f2d04b4140398d1584d1b288fde90a97b5280887e9c94a22df10fa01b2a5e5ee71b7c5ba250056bd65e39c9e343997ae2f7eeedce7ac755a6179c5056f6a3c490389097a18f64a4ec573d28c53f5dafe08e809a626de8676b7e2f3119fa7005beb57e0e0bb714650fffe452e318592fb5901656e7e5f6839eb9b2e38e5b7f05ff5b89efd2a6d596ed41d403

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
cc4f6904ee93320105b10180cef973e7ffcf04bef447e43e9149279a05163efc875612fee8218fe5f3a94c328dfec39d01d0a849e3ed783fc60c3f155709d9bca795fe7d633d10908e9b5340ed5611f9be9c909701d92ff4aac5d587e0ae19e4a1be4645306c9589e028728204cec7351d9365340283ea63fbd164637150322b7a20f3098103c8cf34107eae2fbef2d42fc41a42936ec0788b6c3eab91d8d249214f54b2b2eded2d86762fd3cf4b1f1be06069f1f173ff157677418c7f0246481aff632adaa2fabecdfa306904f7e865d04efa75f8c805011c30959429dd64f9d5bc643eab137c27020cfb27af9645e75920690f8b8903d85532510d202f0d60d02d22fb84e767383932885d5b2ac5b3c20b24c229f934e35ddaf080ce117fe295133f648123bdd62021c522154af7f1c1d24369a671764ae16bde71bcc4515865e5692fa466bd8940f2e9dbeb519b8f66b44db32e034bf5a7a7685fb7a88b1cbada373fe5b7c2fba0c2b709efd214e270fbe35664008df6df24524c79f3e3302e6c285b7cf34f3fad816f1a8bce6c9a81408050995a5d264560699a790e5fd9335a7c133c67282ec8a193f8e448a203c9428ad866ad219dabaeb3b49fcdcad5a58130e79d3d95e441a1594ebb31c84658e122fed2256cb92dc581c33dac331aebc74922856e17dd8503b052d5e95fc77a56cbd05ed7ec47a36d57d987f5a20219a5599c179e62ae7ccc9622242b65270ee98b2a1c7821bd0787f5a73206a7ec5ee52518821e2bd80696510b3385213d64ff04e98a87c144743d28d6af98efaba892c8d7392a5512b216d23939704f1823fb374685785458641475dd52f1a8ac1a86baf9643e0451d0ad96bc8f1958212e8433d573bda948c726d535067199cf316e0db2063f8dfe2b8adee9454ed40fe9ceca97e52d0d69a302611498f6c713270c7bee372c42f063ca1d229e61ea821bc1d240687dba948a1b1bca57523f4a5df4d73bb246a95adffd0a93bad83f40a6386a8e63b521fcd044860e6e2657669343117098c0c08f2ba1643ff190dccf2656a18aa455d3e5fce56a5ad176e51982af792bdc2d2fbb4967da30920f1acd0d49a69d6e751735f0c88a68655ac069a4b61ce1d5c65354ddfca785f0c5cdc22140811ba01b0106f7ad8211a9fe7515903e33ca739687315c24d9b130eef0c809bcb5de96717a402ce28e8511118be6b5d3d7e2fa159b168ec5777db0052fea3e09f1beb6b0bff338d6f184289b695875c81943f5cab5ec6dc11e4a1b43e84b19ef84f7c386ae6ad3f5937df2285d4de9a0732691b270971552fbb56621a74870e66db4f2d1b8006923d865ad867e88fc94cb349ec2aac3b5af445ffebf8c9be87d3e23c508b3c4783d607d282a444da999909a03cd37dd2c80d87a3600baeeee60f291a1460fffd9a9a9cb5b9f8cd1c06d5c38555d65341b728a625f2fea0609cd227f1c5e98149ea7292b90667ca0f06e98849276fb256d2dca0e25bf20752ae07b72e3eaf8725847ac77d6961a459d66177a3cdbb9c581f01e9ca3624f63c40ab906b7869b65a450a85b5b3e103e87c6aa3a30bdb2a7c338f16f59b71171502f9f3a5e0b002a4818011643086ea7a3e41eecf13140b24c91540d4f346bcc0c12530c85cf94488ff67b91dd9ba768282c714aa65c4ef8155d22d07a3ba14d573eddc3c18f75023e55c53e88e0fa66e17e4a8c5899a4f967a862babf169cca10855bcd68a5357ec30caba9459e082cdf263a89b50790414163fdfc7e6a4d6b511ff22462e732d167d8d7712bfc3e963ce9097ac84399611fe8ef23ee3334a415d57e6af2a451e64fc06ccd8d43b393a9a1b93e1c76c4925264fcbe813af2c2a5f5acef3b843beca63f9b91daf07e5036defe8a8e4e5bf745326c2c351276d6f6eba6c4df8a8e016024c6620cb791f2e1c962257953e5a71f5034dbb7b722b1

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