Sections

Add custom navigation

Help Centers with a lot of content can benefit from navigation menus that present categories, section or articles to visitors.

Because category, section and article objects are not available on all pages it’s not possible to create many types of navigation structures using Zendesk page templates alone. That’s where our framework comes in: it allows you to create beautiful, iterative navigation menus with category, section or article lists anywhere in your Help Center!

For example, our Ada theme contains two navigation menus on the Section and Article pages:

  1. Links to categories in a horizontal list across the top of the page.
  2. Links to sections in the page sidebar, with article links also displayed for the active section.

Navigation in the Ada Zendesk theme

Let’s examine the category list in more detail to understand how it works.

Creating a category list, anywhere

The only Zendesk page template that has access to all categories is the Home page, so for the Ada theme we had to use our Category lists plugin. This example simply displays the categories in the knowledge base with the active category, if any, highlighted.

On the page itself we add the following element in the position where we want the list to appear:

<div class="scroll-x" id="category-list"></div>

Because the list is displayed on the Section and Article pages which doesn’t have direct access to the parent category, we use a little JavaScript to identify the active section before rendering a custom micro-template using our Category lists plugin:

<script type="text/javascript">
  ready(function() {
    var categoryListElement = document.getElementById('category-list');

    // Fetch categories, section and articles
    Util.get(['categories', 'sections', 'articles']).then(function(collection) {

      // Get the active section object
      var activeSection = collection.sections.filter(function(section) {
        return section.id === ;
      })[0];

      // Get the active category ID
      var categoryId = activeSection ? activeSection['category_id']: null;

      // Render the category list
      new Categories(categoryListElement, {
        collection: { categories: collection.categories },
        template: 'category-pills',
        templateData: {
          activeCategoryId: categoryId
        }
      });
    });
  });
</script>

By targeting the element that we added to the page using its ID, we’re telling the Category lists plugin to produce our list inside that element. The list itself is rendered using the following micro-template using the template option of the plugin:

<script type="text/html" id="tmpl-category-pills">
  <ul class="nav nav-pills text-primary-inverse font-size-md flex-no-wrap white-space-no-wrap">
    <% categories.forEach(function(category) { %>
      <li class="nav-item font-medium">
        <% if (category.id == activeCategoryId) { %>
          <a class="nav-link border-radius bg-primary-900 text-primary-inverse hover:text-primary-inverse" href="<%= category.html_url %>">
            <%= category.name %>
          </a>
        <% } else { %>
          <a class="nav-link border-radius text-gray-300 hover:text-primary-inverse" href="<%= category.html_url %>">
            <%= category.name %>
          </a>
        <% } %>
      </li>
    <% }); %>
  </ul>
</script>

It loops through the categories that we’ve given it producing a pill-styled nav list. The active category, which is identified using the activeCategoryId variable provided as templateData, is given a darker shade of the primary color unique to the Ada theme using the .bg-primary-900 utility.

Stay tuned as we’ll be providing many more examples of templates like this one that you can use in your themes within our Pattern Library.

Questions or feedback about this guide? Let us know