Article navigation

Display quick and easy navigation to the previous and/or next article from the Article page.

Standard article navigation

Many help centers present a list of articles within the current section on the Article page. The Article Navigation extension can compliment this approach, giving visitors direct access to the previous and next article as defined by your content authors. This is perfect when your articles have some inherit ordering, as there’ll be no confusion as to what a visitor should read next.

Standard article navigation
View code
413b40aa08c5d3608b5d6ae1628a41cc9ad77cc0082a2388a41d1ac2f207f0816b8f92d3f3f6db9f17fadc4a3004f4967e0dfd5b26a37e09a5737df9571b3551dca6e8f4962030c3eb14b72710a5b57ac74eadb327c59af1dea45aeba207701fee8bc1199fb80456524523de14e54bdf750b4bae65276bc3ba179a494e96ceaa3cc26a734ce97d17e1850dd8598d1b64bd4d8b2ccb9cd374f3ed4d9a174b98b41238e79d5d4b2466522b4e0549650fd55cdb50cc68f0f6936f8707eb41fa3abb5b5b0d7f9fb0886457327d0cdc4c2d52871cd127673f91447079e9ac07a39fc56813e22da943eaa84c30edb87e022491a1e4a2e328990e4dfc0456e6b9b93dc7884c33af45f3233d6c856c79d31c2bc945d1b99d5e6c08c95cbe6709d036738ca1a373723cd7bfcca995f317ac4ebf33a940d0bc2e647dbc50531988667ae84e2ccf584e0d9fcd46729f485544e4fd96cd9cff7084da97b54f41de007bd00646c4f62ebbe37bfcc31c8e43f75e8bbade5541a54ddbfe4fe28725bb773bfb739cb2e0c6f9db8e1700494a0866f9ea870d95dd042089ae57b8118113ba3f9f8675e5fb27818a69210ed55647383db909ef07c4bda46d795e9facc165150d49862dfc413696162d609ed07d07545622139718d43d4325d4d3d0e231303576d01b27fffde9d9f8e6247bcb58f5a603c757b118994a6f7d97c802d65f8bc043b6c1acafaa8fa5dfcfaf3bd3913ab9490c78a2326a411025f1da1abd4c5a1378b4477c56b8c8e792b5412e44835fd70e4382bbd54bb9f955a123065bb94fc89b8e4855cd1cb254a67ca7dfdc6d3377b04abd1fadecf37ab18790735508224ac92a5e13e1a9ffc0e72205421b1f73de987021003ef29d1e4e9bd127d95113f2322dac0c04933d103702dac86b6f0f959c2cdeffcadaee55aeec7893daf77d19ca7557d4d29455e4059bc98968f3d0e38adc45ec2f11fed76d36d8ad64828bf2036cb775ed691f8c67fdb674c9d78be1d74eb1e763c0352bf7fd482ab02f1c7c5539d85e37bdbdcc5d84a72104e57ededad202797dd88f1affdc352236cc9d2eb24a55d9a90755a4fc51582621b0fc5a9ce955ebac0d14208679ae10bc2563567819d6a27a246861f419dd791becd791ad1f57352e9731959fa58769c528f0f4a6d187fd09baefeca7949769824ba87d437ca25b0f77d4d80bcd1caa0b2f166ab55134ad23fa17dfdf08d1b4f152e41100ba088b515cbe655c2d0d897a05172e8a8c0482bbba55abed7e7c17ce3331df0e686a74a333e6ea316d376d1a8a7cede799a8b70da38023a432a48640d9b1860b0673facc5b8370cebfc9205bbd4a171068e98c236712284c6fb79ab4793a51d7f106a41c8ed72ed2a225886f56ffa5dbc7a2eb9af0558dbb64e8f3a5e2ad50c98d771099def2984ad00533255a347878c6b8349c1e902612ac43243ac678b9ef03ff4e88f207b3c132d160482260c93566d76c0c1d195be7e0fec4a656b51fd3b01ce729e8d9a86bf0482632ee38c0cbc47ed4565863016f6067842d0a19f4c2ade55235c5b6ca6f47f29a76ed9e1494c65091ecfbdd1ae56dcc4566e8a6727e5a7836a683a5cf5c11c31fe7cfd3ac7f22e4c9c6c907bc6c79ea27a5cd41641de8a03e19b2e091cb7c4e72dcd218c420cac717f6e81f6fc5e0ebf0696c15e69bfe9ba81dfe9a1f9203a84efd4378c523bda3d293156f07605ef6c14edad88217a512e447655da1a8e786f0cb0aab7024f8ed90593cc3883b792f02572cd3a12ab9ada4e3dcc7dad1b4ca2fa23ce51b3949dabbff5c3ef7fd636f6fa8caa053cfdd493e25314d7834d181a2bd5a79573289810c8968418ef37fbbef8a4374823011d7c6f581b90f9bfa6422aaa801c74d45f52df402cfcdb1a708057dbd7ce35c99c5731655adec797dc9b3fca4fb82d9132fce3d7fd3ed32bae8ccfc5810f1b86049f910e8cb67a5ed80206abb1f8ce363e567483b3f302540542c95f58fe9c3d8ef6bb640a6a9de9400c8acfc7aeeb6a57f6482e524058f687bb33125c056018104a37d01e7923371d192f549d6c7b49c004431bbe5d2e5cc9cac01329e1dda0a0fd0ab70ccac86ac2d932d9c70a2f48dfe9781c20d402bcd3bd315714cd588f104322a1a1b627446bd606a334b8f5b577595e67e7db26f37a51083ddfa162c3b0c58695c1981aef87034fc8809894f41a91b809b0af0091d00a731c363e29c8f506b2c26b995423cfeda529064e80e3c2099

The links will inherit the overall style of the theme as defined in your theme settings. Additional control is provided through extension options and you can even create your own fully custom templates. Using custom templates, previous and next article links can be presented as simple buttons or include information from the articles themselves, like titles and excerpts.

Custom article navigation

Because the layout and appearance of the links themselves can be fully customized using templates, you can tailor them to your specific use-case.

Next article link with summary information
View code
538fbfb1615777e601074eadd5b0abc2e1fd232211977d3c36e2c808265f7b510221dd6318de0a4c72f4068b1b05c52feb16f4431dc223255a2fc9f37b1e3acfb4eb422e7a7d0da812f31cd5d5253a29a9836e249167f234d3633db016fba4186d29cd19cef89861d637730edce5398b7da93ad5bd9ff4f1f73b642b23dac702dcfd3fd2716d0f79689f09e1bb835c941e51ae2242838a03cd19c2589c9a4019f812a5837f570ff160ce0991767dffeb3bc8bf9bd911c46af2d868377b2818b44bb6032ed60c239e2a7d4cc57d513d158d9e8d167183d987ea848ba0f2f82c0a92bcf40b8ea605e41481bb3dae827c309033f51b75ab485670651f6c4543f77f744fc1e52bd371650d7f034a362a57d31a00c2f1e37c97d7436366051d021975498d598c133fcbc343dcb4a51b520272dcf7938f72dfd3f7a0e9b6ac78db65936c6db678b27b8aee2a72fcd8128d89f8ab4845e647428acc1eee55b62d0053ef8b0699300e7b7bf352c0907378a7bf491b2bb03e1e4b48cb707c5258720fb20fc48ba97221b4ccc9bd6f40c27490f8b0b07ae0bf489d89d5ae983beaa304d1e827622337df8fee16d293da12219e83ed167016f9d0243607b9c0265f3f8671e5c02a2f4be5ad0ff7ae940f9a7279be5c263233fca8dbf20ad9ca921990847e3ef4885a129c53f471fc7ed5813e9fb9feacd21e85d1fb929b07781733f15989e6f3bff6dcbce91e26735273f8d673f4e37c6c32fd0c73e3312e40f811bcb3f6cbac6ffb7aacc3e16165996a6ffeeb93458f7c92bb025c20b6f878f78af552481e7c68ba6caec00b0d0c1d368cf840e5aa791cd5c1100591d9f74c273033066c33663bc0d19f43b495dd725eb9cdad180f46186f53aacbec74b7b014537ac57d5ed8067e3861f369ae13c475195d3d411be25a06bb2b84b6d02b68d19ed86ed64ec4062cc97eb108e148be3a0e7d87d6f4a5fa1ce0946bdc6dbdc6bc45eb38138d5b758a8139f2c2421eac2598d2aa2eea3950bc2158842b71c1c88732daf28a80cb74455f13ad86682bf61cf0ab55f7f2afb2fd536054d01d85755a204a939440bb0db4a173cfcf33dcc46a17a7bf4cdc832b1d93b67f4eaeb31e78557644e08b940eaae01b8cd931cab69382cc874fcaf00c87b46275b12095d83ecb8e2dced08eae5c969a370452ec6dea79c732815280c6d9d0cd1448ca6bded4384f720d94bd1aabed29817021caa3e8ba648697566b580d37d9ddb5ac394350c26fc9d59ceb13b0bb19d1e3da7f1d70238769f861b2cee77795bd322e73ae00084612dce5b2d926801a80a36d86fa9d92229f2457f21702140d90425319b14e3041a794522e5119f772e34d442a755b682a0ee0b69e426cd7f858912299116bab2a08400435d612157f5b6262125a9009622a767e5f636ca8276e1a2de9d9937406ba1f201b19d65eeca6fdde646c22f561e1e2c54a011117481c7567fe14e9d368214c426700cdaaee87a305592862dfd6a1880521c02a73f9c4990ef7fe1736be2c0c6a39ec76a2a45f1369eaabb3e556018a1337c15539c56d9d33ce8617a87a7e586bc5f328319b9f99ff96f848ecfb4ff5d4145cb249a2c2453311e96afb0561898c5d2583e969aeb67906a32a2b504ddfee2b26cc78da1367fe72abb17fcdc188b5fb01883fd6e3e132dd0247caded6ab3c6e00e333a985949b668a2c34ee84e483e97477511f90376c846df013397f7b3eeee4d55ed3e86453a72d531bae6c77a3488372d573dd202c58b5ee24dca056c385a8383e45b025dcf5c3af9d477d1784bccc72fbd536f6fa0ca85d919d64054ba2db9903335e86aa54cb1c48ff8b432df4e3352191a08f21b761a4ca2cfea632be68c292fda3689dff49eb2d947ec46b8942e04c6f85efcb896ab9aa3cf50908749a82bec6bb2350e3108a561acf0f6a898ad2f7a11848dc06fac7cabb39c0a5c0c031eb54a00f62f0bd860d13081f5fe98dd3dfc0ad130a5928479467fe96cbfdf4c794b4e5020038b37d498f44690f2b01eab2541459c4663046a1d0ab3e7e1a549885635240e3c1a269680b24c5650f5ca5b697c35bf64bce357474fea366974b009f7e84eb3a0b9aa10ee0957bafd7203800e451de8307fd29a9128a0bb6531c3e7420a2ac24aa8ba93e9709fe92073a95053ead16718cc1a15b6e4eb59a440661a5691682d9f52d2ab985e073e7dd7903d07eedafdb13301c0ee147d447589bb445f681fb0656ceefc67e9dc1c278215a3a36dbafeee11e735506797e775d5881f8dc171239d8b4d8aaebe427dd5934f911c144f0267d3074695bb17826e925324dc5bff250808a65b34809bc55fc090050c4e8b5a5de0c86cc8248dbceba9e11216a33420eadd3c30fe90251fa65161419f7ec11c90e0ca2904fb54533184b63b8987db187d714d7e698a4ee92c7eb299dd6981419066ab38ff9a6a734b69cfdb180b831d0eeaca7fe69364f0ecfe51dfcb844b9b862efc8319222543b09a9a50e613b6ad042a807012a6f0e1006f41dc56389c1e29477a0e30b782b9baf3ab05709fbd8c81efcc30f204ccae9b526c754659f5eec9f258e9acd4ee63509a7fc83d212ad0746134e95185b0e201ea0eadb438fd1d521b95646eef524c35ee5931fac2690c215b08c5f0c3d7b9f904bfd8398c4e5066fd2f441091803a81c16ae5b93eb53e9a56e7e7638c738b664032c68a0d48f214fa081f5032a56ea07eb717befa4d764edc404fdba38697bea31bf70b4b008446e1fcdd605b87c5b4c499ece81ff94d85976ae1c4e5fa09125ddc5627b70161433c261c26bd559d34046fe388e122b87afcc005a91f956e329adbe775068cac1b1a3573e288ad0345b10d591708b2298e9e9f6b9f0dcc0215ce608d419f15bdb62075f673216846a97f942316844c55aab19a3211dcaa4b0cefcc76b743c35171cf7eb15687ba94ba88c4865c598c031d34d6954965c2a13311b9782e85b3c9a470e5e8be464977e41f549f6facb87e931c1e92be78e3cd03d49f49b684955c2bded7adea14c825f24ee0a6c3077cb4c4996ba3b3bd060509a595f60e29ce5ac5e8c83687a69f515c044f123de7eac3b2f3828837a107d3a677d21a62fb3a365331778cc14c1f3e7da7a4c522f5dbba5a38a2bcd6f5d4bbe8471f0d133468c2458b63233570ce16d480695529b8a06b94d31e15b965423363b7830d81fcd4d87d0e9baf6e12fba82c1e880103cab666b38e12f0ebeefbc50b123b9acbdc0cbc9bed60a9715bc96a41237b8fa44e9526defe75360dd9df1160270ccf7ab9168a98f26bd9f8a64d1901f8c278c73396846303d931974306b3f69737a23870a10c77251bf5d11db79e55e10d27f4eafebbf546dc4f4e6dedf3c72055d3f3ce36f256c1a3db11e2f3f27ec2d11a4b2d7180c6bfd00b697314f679943bd63054cb63d5690da2422cdf57cf0832fcbea44b8fe29509cc6655e7ccb66582c821481e6ddf658814223fd94a3b7c8e145bedd58b7baa1292b3fb31b49dd5bc852ab67aa17322406b16f98b020ce36c9d836b1524f8c38833f7cda1d66df0edb9742863e4506c5121bbf2b8ad5e3486f5f0f0d6a85c77987f49f00e9bcf71fe414569e810de55ea2c038ae3bb91c1440452e2b5685b73fd250feee2b36bca51e72f90f3bdf425b9df49f0d192cc6590b2daa0145ea8a0fd5430c90a98f89792c6134f9a6b5d2366b4ee854e45c3beccf7da22440579f7048c2d1a56e4bfacf237faf6f7de86638100ad89c0f4bea72ebfa2fd7002b04a6217c7ed8c3dcd1b30f44acba874dec52646250a9bdafee0416c805c6107cd99d1469706c8adde04646fd23904d6942021c98c23b40140dd7f315283410fb8b9ea673964940fdc7a1c9f3b04ebf001177930d43707ff3c0f9a380c7693c77e1cb35ed719a6be4a4f24bab534cdf66f99f9b1104b9a80dcb19934908d999796a37d7b35b341893146fc677e8a3ae551f05901360dcb08d3e741fceab6856b2dad2d2fb0e63c6e280a8468936d8d57d8da1bca7342831b4987be9103e86b6fec4c76b1bcb04ed9e53e201d4659fb74157e193800b6bb2655a36f39e5e7243f51e351bb4193340078ca7ff5a1dee8845b94d0e5fe546174043c43db25490cbe46f89bf49cca17824758df1b9b5790e2732c35314eaaa671f9994ed64ae7af11b0795b334c80f573d743857d2f1b0d30f721b2f43d9d52cec226a41e94fea2bfef12b6535379188f884ac1366eb62e72fbc1910cbbb7266aff4de28fd6a9a6cf82ec6a46e695c76d43d1c24b5c77410d30a4a495b8e9c5ab37b270dabddb2e5413376e55adbe2a1f8e021752d86924c1a5cc54fe9fd40a4d31e1e91ff1873badc0e620d8da4f02bba7e0bc20316ad7ce55170b654a48f7dbc467f614ec736f136b4260baee63b02098a1bb27c77100d8be3614efa2f6b2aaf5d996567db05e08e8867f3b81ea17192c36a272337a2dc5c6202a17a9eb727fcce9c81bcadc37a8331ee95bbd0c2d528b7985b2881a4c5e64d448299f34eb6fcf68646bb1d793f3358e2e84c42a7cfc2bee89afcafcf9c0906aa39530f09d16de72fda61e71f2b6bd4cd8554cf91a456f8619e3e3f8aa9b13fd910277e2760c997a9a7b61f23ee9fb0e004bf29a23acf5ef077563aee578be333c3035a73b0393f471233c41f41d66a78bc058feceea0604441c9648d660c7e536ae9cd747240f88305013c8aa68921cbd6c3c9246d253ece15b36dda6f69eab9be118fff974c348146625b2bc0e860a727af7f430a23306cdad6d5384ef52b511ded237fcc6bfbac2f4a338112f96abd1d89561eb00a37eaabaae7ca2a7ae9da17d5ad5fd0433173e44594ead1de9e816f28c27ba0b192d41e77c4cf53504032424119e5ce427fe10077053763c35c30ef1bf666fc1c917dbf27ecf046446bb399e164a531247daf5a5a38ac9d2a20f96a320c21df8cd5a40ac627c521525f078fa7323f95684d9a53c7c7f20b10dd76a24c03379c6e30e25142094df8e269645da8880ea99c7663c18ae3ae25be616dae7c9acac08004f1e5d4fd7afe3b2470144a5876eb1478dc57c03c8124ccec2781c6943f547bf9e0f81e1e6ade15ae030c2ae0c15e2459e5e26d6a9af0321460c7315ba9b78cdcb6110ec22f80d764c1d6adfc7b3267377387990f8e305b2cd1d990f1411b67

For more examples, take a look at our Article Navigation patterns.

Creating article navigation links

Our themes allow you to add article navigation links to article pages using the Article navigation setting in the Article page elements setting group. Once a style other than None has been selected, the article navigation links will appear below your article content.

The Article Navigation extension is bundled into all of our themes by default, so you can start using it straight away. You can find the source code for the extension within the extensions.(min.)js file in the theme’s Assets folder.

Use data-element="article-navigation" on an element to create a dynamic article navigation element:

<div data-element="article-navigation" data-article-id="{{article.id}}"></div>

If used outside of the Article page, you must provide an article ID using the data-article-id attribute.

If data attributes are used you will need to ensure that the allow unsafe HTML setting is enabled within Zendesk Guide.

The Article Navigation extension can be instantiated against a element using JavaScript:

<div id="article-navigation"></div>

<script type="text/javascript">
  ready(function() {
    new ArticleNavigation(document.getElementById('article-navigation'), {
      articleId: {{article.id}},
      // Options go here
    });
  });
</script>

Options

Name Type Default Description
articleId string
number
null
null The ID of the current article.
labels array [] The label(s) to filter articles by.
properties array See below The object properties from the REST API response to pass to the templating function.
template string
null
null The name of the template to use.
templateData object {} Additional data to expose to the templating function.

The following article properties are passed to the templating function by default:

  • id
  • title
  • html_url
  • position
  • promoted
  • draft

The following section and category properties are required by the extension to sort the collection of articles:

  • section_id
  • category_id

Events

Class Properties
articleNavigation:render Fires when the article list has been rendered.

Related extensions

Category dropdown Free

Category dropdown

Display all categories within a menu in the page header.

Collapse Free

Collapse

Create versatile collapsible content areas anywhere in your help center.

Featured articles Free

Featured articles

Display a list of articles with one or more labels.