Article navigation

Provide a quick and easy navigation to the previous and/or next article on the Article page.

In this article


  • <div data-element="article-navigation" data-article-id="{{}}" data-section-id="{{}}" data-template="article-navigation"></div>
    <script type="text/html" id="tmpl-article-navigation">
      <% if (previousArticle || nextArticle) { %>
        <div class="row">
          <% if (previousArticle) { %>
            <div class="sm:col">
              <h4 class="mb-2">
                Previous article
              <a href="<%= previousArticle.html_url %>">
                <%= previousArticle.title %>
          <% } %>
          <% if (nextArticle) { %>
            <div class="sm:col text-right<% if (!previousArticle) { %> sm:col-offset-6<% } %>">
              <h4 class="mb-2">
                Next article
              <a href="<%= nextArticle.html_url %>">
                <%= nextArticle.title %>
          <% } %>
      <% } %>

You can fully style and customize the article navigation links both in terms of their look-and-feel and functionality by specifying a custom micro-template as a plugin option.


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="{{}}"></div>

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

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

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

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


Name Type Default Description
articleId string
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 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 plugin to sort the collection of articles:

  • section_id
  • category_id


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