Article navigation

Used on the Article page, this pattern provides quick and easy navigation to the previous and/or next article.

Standard article navigation
View code
<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>
Bordered navigation links
View code
<template id="tmpl-article-navigation">
  <% if (previousArticle || nextArticle) { %>
    <div class="border-top border-bottom">
      <div class="row">
        <% if (previousArticle) { %>
          <div class="sm:col pb-5<% if (nextArticle) { %> sm:border-right<% } %>">
            <% if (previousTitle) { %>
              <h4 class="mb-2 font-medium">
                <%= previousTitle %>
              </h4>
            <% } %>
            <a class="text-inherit link-stretched" href="<%= previousArticle.html_url %>">
              <%= previousArticle.title %>
           </a>
          </div>
        <% } %>
        <% if (nextArticle) { %>
          <div class="sm:col pb-5 text-right<% if (!previousArticle) { %> sm:col-offset-6<% } %>">
            <% if (nextTitle) { %>
              <h4 class="mb-2 font-medium">
                <%= nextTitle %>
              </h4>
            <% } %>
            <a class="text-inherit link-stretched" href="<%= nextArticle.html_url %>">
              <%= nextArticle.title %>
            </a>
          </div>
        <% } %>
      </div>
    </div>
  <% } %>
</template>
Button navigation links
View code
<template id="tmpl-article-navigation">
  <% if (previousArticle || nextArticle) { %>
    <div class="flex flex-column my-4 align-items-center justify-content-between sm:flex-row">
      <% if (previousArticle) { %>
        <a class="button button-primary my-2 w-full sm:w-auto md:font-size-lg" href="<%= previousArticle.html_url %>">
          <svg class="svg-icon fill-current mr-2" 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><%= previousArticle.title %>
        </a>
      <% } %>
      <% if (nextArticle) { %>
        <a class="button button-primary my-2 w-full sm:w-auto md:font-size-lg" href="<%= nextArticle.html_url %>">
          <%= nextArticle.title %><svg class="svg-icon fill-current ml-2" 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>
        </a>
      <% } %>
    </div>
  <% } %>
</template>

Single article links

Using a custom micro-template you can show a link to just the previous or next article.

Next article link
View code
<template id="tmpl-article-navigation">
  <% if (nextArticle) { %>
    <div class="md:flex bg-gray-100 p-5">
      <p class="md:mb-0">
        👉<% if (nextTitle) { %> <strong class="mx-2"><%= nextTitle %></strong><% } %>
      </p>
      <p class="mb-0">
        <a class="text-inherit link-stretched underline" href="<%= nextArticle.html_url %>">
          <%= nextArticle.title %>
        </a>
      </p>
    </div>
  <% } %>
</template>

Using the properties option described on the Article Navigation extension page you can provide additional information to the custom micro-template. Including additional properties for the built-in article navigation links can be done by adding a data-properties attribute on the article navigation element:

{{~#isnt settings.article_navigation_style 'none'}}
  <div
    class="my-6"
    data-element="article-navigation"
    data-template="article-navigation"
    data-properties='["id", "title", "body", "html_url", "position", "created_at", "category_id", "section_id", "draft"]'
    data-next-title="{{#if settings.use_translations}}{{dc settings.next_article_title}}{{else}}{{settings.next_article_title}}{{/if}}"
    data-previous-title="{{#if settings.use_translations}}{{dc settings.previous_article_title}}{{else}}{{settings.previous_article_title}}{{/if}}">
  </div>
{{/isnt~}}

For example, you can fetch the article body and use it to present an excerpt:

Next article link with summary information
View code
<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>
Next article preview and social links in columns
View code
<template id="tmpl-article-navigation">
  <% if (nextArticle) { %>
    <div class="row row-lg">
      <div class="md:col-6">
        <h3 class="uppercase text-gray-700 font-size-md pb-2 border-bottom">
          Share this article
        </h3>
        <p class="my-5">
          If you found this article helpful, please share it with others using the links below.
        </p>
        <div class="mt-4 font-size-xl">
          {{share}}
        </div>
      </div>
      <div class="md:col-6">
        <% if (nextTitle) { %>
          <h3 class="uppercase text-gray-700 font-size-md pb-2 border-bottom">
            <%= nextTitle %>
          </h3>
        <% } %>
         <h3>
           <a class="text-inherit"href="#">
            <%= nextArticle.title %>
          </a>
        </h3>
        <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>
      </div>
    </div>
  <% } %>
</template>

Article navigation link links are powered by our Article Navigation extension and can be added to the Article page using the Article navigation setting in the Article page elements setting group. The previous and next titles, which some patterns display, are also configurable through the Previous article navigation title and Next article navigation title settings, respectively.

On the Article page

Select an article navigation style other than None in theme settings to have the article navigation links appear on the Article page.

To replace the default layout, copy-and-paste the code of your selected pattern into the bottom of the footer.hbs template.

Related patterns

Breadcrumbs

Breadcrumbs

6 patterns

Pagination

Pagination

2 patterns