Add buttons that navigate to Next, Previous, or Parent topics

Antora stores paths and filenames in template variables that your UI bundle can use to add links or buttons. Here’s how I added Previous, Next, and Parent navigation buttons to my site.

The Antora documentation lists the variable names as page.parent, page.next, and page.previous. To get this to work, your code needs to use page.parent.url, page.next.url, and page.previous.url.

Add page navigation buttons to the toolbar

Here’s how to add Parent, Previous, and Next buttons to the toolbar:

  1. Edit src/partials/header-content.hbs in your UI bundle.

  2. Add the following code:

    <div class="navbar-item">
  {{#if page.parent}}
  <span class="control"><a class="button is-primary" href="{{{siteRootPath}}}{{{page.parent.url}}}">Parent</a></span>&nbsp;&nbsp;
  {{/if}}
  {{#if page.previous}}
  <span class="control"><a class="button is-primary" href="{{{siteRootPath}}}{{{page.previous.url}}}">Prev</a></span>&nbsp;&nbsp;
  {{/if}}
  {{#if page.next}}
  <span class="control"><a class="button is-primary" href="{{{siteRootPath}}}{{{page.next.url}}}">Next</a></span>
  {{/if}}
</div>

    The above code checks to see if the page has a parent page, and if so, it adds a link to that parent page. If a previous page exists, it adds a Previous button. If a next page exists, it adds a Next button. This works well.

Add page navigation buttons to the sidebar TOC

You may want to add buttons to the sidebar TOC, so that when buttons on the toolbar are hidden for a smaller screen, a user can navigate to next and previous pages using the menu dropdown.

To add buttons to the sidebar TOC:

  1. Edit src/partials/navigation-menu.hbs in your UI bundle.

  2. Add the following code:

    {{#if page.parent}}
<button onclick="window.location.href = '{{{siteRootPath}}}{{{page.parent.url}}}';">Parent</button>&nbsp;&nbsp;
{{/if}}
{{#if page.previous}}
<button onclick="window.location.href = '{{{siteRootPath}}}{{{page.previous.url}}}';">Previous</button>&nbsp;&nbsp;
{{/if}}
{{#if page.next}}
<button onclick="window.location.href = '{{{siteRootPath}}}{{{page.next.url}}}';">Next</button>
{{/if}}

Don’t forget to pack your UI bundle after making changes

Your UI bundle must be packed (zipped) in order for Antora to build your latest UI.

  1. Open terminal.

  2. Change to the directory containing your UI bundle. The command is cd followed by the path to that folder.

  3. Type gulp pack.

  4. To see the new UI, use Antora to build the site.