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.
<template id="tmpl-article-navigation">
<% if (previousArticle || nextArticle) { %>
<div class="row">
<% if (previousArticle) { %>
<div class="sm:col">
<% if (previousTitle) { %>
<h4 class="mb-2">
<%= previousTitle %>
</h4>
<% } %>
<a href="<%= previousArticle.html_url %>">
<%= previousArticle.title %>
</a>
</div>
<% } %>
<% if (nextArticle) { %>
<div class="sm:col text-right<% if (!previousArticle) { %> sm:col-offset-6<% } %>">
<% if (nextTitle) { %>
<h4 class="mb-2">
<%= nextTitle %>
</h4>
<% } %>
<a href="<%= nextArticle.html_url %>">
<%= nextArticle.title %>
</a>
</div>
<% } %>
</div>
<% } %>
</template>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.
<template id="tmpl-article-navigation">
<% if (nextArticle) { %>
<div class="bg-gray-100 p-5 border border-radius">
<div class="flex align-items-center justify-content-between">
<% if (nextTitle) { %>
<h3 class="mt-0">
<%= nextTitle %>
</h3>
<% } %>
<nav class="flex mb-4">
<% if (previousArticle) { %>
<a class="button button-primary p-2 circle flex align-items-center justify-content-center mr-1" href="<%= previousArticle.html_url %>">
<svg class="svg-icon fill-current text-white bottom-0" viewBox="0 0 423 323" xmlns="http://www.w3.org/2000/svg">
<path d="M423,162 C423,174 413,184 401,184 L76,184 L177,286 C186,294 186,308 177,317 C173,321 167,323 161,323 C156,323 150,321 146,317 L7,178 C-2,169 -2,155 7,146 L146,7 C155,-2 169,-2 177,7 C186,16 186,30 177,39 L76,140 L401,140 C413,140 423,150 423,162 Z"></path>
</svg>
<span class="sr-only"><%= previousArticle.title %></span>
</a>
<% } %>
<a class="button button-primary p-2 circle flex align-items-center justify-content-center" href="<%= nextArticle.html_url %>">
<svg class="svg-icon fill-current text-white bottom-0" viewBox="0 0 423 323" xmlns="http://www.w3.org/2000/svg">
<path d="M416,178 L277,317 C273,321 267,323 262,323 C256,323 251,321 246,317 C237,308 237,294 246,285 L347,184 L22,184 C10,184 0,174 0,162 C0,150 10,140 22,140 L347,140 L246,38 C237,30 237,16 246,7 C254,-2 268,-2 277,7 L416,146 C425,155 425,169 416,178 Z"></path>
</svg>
<span class="sr-only"><%= nextArticle.title %></span>
</a>
</nav>
</div>
<div class="card card-body bg-white">
<h4 class="my-4">
<%= nextArticle.title %>
</h4>
<p>
<%
var body = '';
var characterCount = 120;
if (nextArticle.hasOwnProperty('body')) {
body = nextArticle.body.replace(/(<([^>]+)>)/ig,"").trim();
body.substring(0, characterCount);
body.length > characterCount ? '...' : ''
} %>
<%= body.substring(0, characterCount) %>
<%= body.length > characterCount ? '...' : '' %>
</p>
<a class="button button-primary link-stretched mr-auto my-4" href="<%= nextArticle.html_url %>">
View article
</a>
</div>
</div>
<% } %>
</template>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" with an empty element on the Article page and pass the article ID using the data-article-id attribute:
<div data-element="article-navigation" data-article-id="{{article.id}}"></div>
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 | stringnumbernull | 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 | stringnull | 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:
idtitlehtml_urlpositionpromoteddraft
The following section and category properties are required by the extension to sort the collection of articles:
section_idcategory_id
Events
| Class | Properties |
|---|---|
articleNavigation:render | Fires when the article list has been rendered. |
