Sections

Free

Premium

Article navigation

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

In this article

Example

Standard article navigation 
  • <div data-element="article-navigation" data-article-id="{{article.id}}" data-section-id="{{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
          </h4>
          <a href="<%= previousArticle.html_url %>">
            <%= previousArticle.title %>
          </a>
        </div>
      <% } %>
      <% if (nextArticle) { %>
        <div class="sm:col text-right<% if (!previousArticle) { %> sm:col-offset-6<% } %>">
          <h4 class="mb-2">
            Next article
          </h4>
          <a href="<%= nextArticle.html_url %>">
            <%= nextArticle.title %>
          </a>
        </div>
      <% } %>
    </div>
  <% } %>
</script>

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.

Usage

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 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: {{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 plugin to sort the collection of articles:

  • section_id
  • category_id

Events

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