Navigation

Create interactive navigation menus anywhere in your help center.

The Navigation extension allows you to create dynamic, interactive navigation elements anywhere in your help center quickly and easily without being limited by Zendesk’s native page template and objects.

Category lists

Categories presented in collapsible tabs
View code
5d364caa38f48efca0404d7eaaed44913771454620703ceabc282c3b655d0125b8a66b4dada1d0d9d29f22a7f7d4fae14c8b4c23b7fa355c02340bf9cd0027205a0b2702ad4064973ebddf274d8bc56513676f655e6d857cfad944711245d93cfa2171716742bc6a881d46cc5e2a7f9042a4793a6d0ce5ae958cab4537c3c1ed3e5a413877c79e9eb984868bddbe82864412f2a6fc4c83a2d32ca52764b257611dad2e0bb7d88cb0becf1804cb06f4d01f7e62a18fd6582965be35e4617488bd748db4f7245bac58f23b81ef749b8da475e9cb13277b99e772a29b195050d920bca01d62c9af74673ff4a4d3837f4b9e1967a8c71b193222460c29cccd171e5c16893d03ee6d37007699272ee294293f0474bd6380decb36bfbb43e47c523ef00fef66a9f3137c33c182382474186c7ff141de963fadc4687de485e89af525420900f2d83832b09914004d518ae0b7f69f877c59364efcfa809a639c56c14a9ad5744758b6abc2ba9a1610ed73a17ffa4536a475405286118ea39296998a3d09fb4703623e776b4f3278c25ea37258d4053d8f1e6c7909609da9d8af46ec4432148cfed95cb13e86fd2f6e08c243f7ff7e4e99587fc91d5b86fa016bf904455dc3a78cfd5ddb8be3bc0e004cb7eb19de57bcbbb2055d832588dcbcc59318fe0314e4aaf0850b06784df7de313c79a7eba063d54c036edd09650f61c6f3984fb1e41ac59e767bde0f496e2c9e7351a80f342dc669dcd9620b3a5efbe2dcf15a758757eceffd32a7a93531531b4bcd89072425204d45bbecfbbc8371700b0d081d83b3bf62ff08015dde6c6201a3a8e50eb23fdc8d4c92a16a924a0ea4b44d68db566c57c77ee97981ce5e95382774b7380f7861a2046fff9ddab9119cadee84668b7a5e291a3ce62ffad561befa8b7d31c01a4c4d9d3c3692b5ac09c5f5e32495e1402656b2c2092c0728c6c31948ee3d817078a14d8b3f5621d39d4c5ded1d01bc65e98908383f9db6fa144387374533ccf251f002d51625b43f8c98d47a7764dab898364d62d184551d93ea41f3a1125f9774c1779964f1c6d0ff2c42e9ebcece1ee33160880fa41ea503275a3c10907d9ca6e0277a6415bc22b1a06944a4de6cf5f79bcc6d32efc18eb452e3ab553bd4d2bd2f39b304d5ef8d463d5a7411f90957a900313903538e4a5e1494eadac78e40ea8046ddc43ab913531d3a31043c9242a0bd9188fd930d524803b8ec449d10c6f085feb5c9a3c779cd3ffc892efb4466b4c08598b9c1eb269513d0dc518efe8a58a577af033205506c0036ba507ca2ba85104cd261ced1cbf9f312f5306eafc78af6164e0bc8ddbb21ce3037d3f0f44f74ea664b5f618fda9035145792d9389d2ec19fcc3609ed697321b381627a445e8f4ef84268d320ab32f16102d51522648ad23c744bae566c203960226426d6e1edcd671856f9e8df9ee28e83015d17958fe613c0bbf7c92bcfab5c28f8a2f2d138efff4187b2c81e1729c7fb8ba8cab94b6346cc7804d840e7e766e02ca3477cbbf35da892a6c1040110bd55e53321777b2bafc5fb694f40efda11a064600c2a4a0146beba41e96a617fd96d15550941b219390f03430caf9cfe684e2a73ae71ccf26bc717d7c8007e1e8885d26a6acd67422a1ce1171ad6338315ebb679feff26d6897b085ba7dcdf79a2991ae5a0f5d47582225b13d0a75627ab74b6de597ca99df1d9e1055bcffa4c4da86a81bdbd2eefa4e8c361308b24e23fa5dffa0a490fc52dc8ed62b6200af988147e433d479433e9f040d1b240b8df88332e4e2b683e4eaedd6e00dc928650f6ab62a0f6473e53bf569036c98fe66491c26a9b52781102aa5e2a230dd323dcc2e703f5d16da4a27908d066ae6d5cc8c6358b0a104463e53aab7c5a87b693acf681fad8e479173134b8111543bcb3fe1bd3dd38

Section lists

Sections presented in groups

Article lists

Articles in a two-column list
Navigation menu containing sections and articles

Additional examples can be seen throughout our themes and in our Pattern Library.

The Navigation extension is bundled into all of our themes by default, so you can start using it straight away. You can find the source code for the extension within the extension-navigation.(min.)js file in the theme’s Assets folder.

Our themes allow you to add pre-built navigation menus on the Category, Section and Article pages using theme settings.

  1. In Zendesk Guide, click the Customize design icon (Customize icon) in the sidebar.

  2. Click Customize on the theme you want to edit.

  3. Expand the Category page elements, Section page elements or Article page elements sections and select a navigation style from the sidebar navigation setting.

Each setting includes a Custom template option which, when selected, allows you to use one of the many navigation patterns from our library.

Use data-element="navigation" on an element to create a dynamic navigation menu.

<div data-element="navigation" data-template="my-custom-template"></div>

<template id="tmpl-my-custom-template">
  ...
</template>

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

The Navigation extension can be initialized using JavaScript:

<div id="navigation-element">...</div>

<template id="tmpl-my-custom-template">
  ...
</template>

<script type="text/javascript">
  ready(function() {
    var navigationElement = document.getElementById('navigation-element');
    if (!navigationElement) return;

    new Navigation(navigationElement, {
      template: 'my-custom-template',
      // Other options go here
    });
  });
</script>

Custom micro-templates

When using a custom micro-template, each object has an additional property (isActive) which specifies whether it’s active (meaning it, or one of its child or descendant objects, is being viewed).

<ul class="list-unstyled">
  <% categories.forEach(function(category) { %>
    <li>
      <a class="<% if (category.isActive) { %> font-bold<% } %>" href="<%= category.html_url %>">
        <%= category.name %>
      </a>
    </li>
  <% }) %>
</ul>

You can also access the IDs of the active category, section or article (if any) using activeCategoryId, activeSectionId and activeArticleId:

<ul class="list-unstyled">
  <% sections.forEach(function(section) { %>
    <li>
      <a class="<% if (section.id === activeSectionId) { %> font-bold<% } %>" href="<%= section.html_url %>">
        <%= section.name %>
      </a>
    </li>
  <% }) %>
</ul>

This is useful if you’re creating navigation menus with nested subsections, where two or more sections may have an isActive value of true, as activeSectionId represents the section actually being viewed (if any).

Additional custom data can be supplied to the template using the templateData option described below.

<nav id="navigation"></nav>

<script type="text/javascript">
  ready(function() {
    new Navigation(document.getElementById('navigation'), {
      templateData: {
        foo: 'bar'
      }
    });
  });
</script>

Which would allow the value of foo to be accessed in a template using <%= foo %>.

Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data- and use kebab case instead of camel case.

Name Type Default Description
collection object {} An object containing an array of objects representing categories, sections, articles, topics and/or posts. If the collection is not provided, the extension will fetch the objects specified in the option below from the Zendesk REST API.
objects array [
 'categories',
 'sections',
 'articles'
]
The list of object types to fetch from the REST API and make available to the template.
properties array Object properties The list of object properties from the REST API response to pass to the template.
categoryId string
number
null
null Only return objects from a specific category.
sectionId string
number
null
null Only return objects from a specific section.
topicId string
number
null
null Only return objects from a specific topic.
labels array [] Only return articles with specific labels.
filter object {} An object containing references to custom filtering functions for each object type, where the key is the type of object (e.g., 'categories'). The default filtering functions filter out draft articles.
sort object {} An object containing references to custom sorting functions for each object type, where the key is the type of object (e.g., 'categories').
sortOrder string 'asc' The sort order to use for each object collection.
template string
null
null The name of the template to use.
templateData object {} Additional data to expose to the template.

The collection object containing categories, sections, article, topics and/or posts is sorted and organized such that parent objects have access to their children.

<% categories.forEach(function(category) { %>
  <% category.sections.forEach(function(section) { %> // This is a child section
     ...
     <% section.sections.forEach(function(subsection) { %> // This is a subsection
       ...
    <% }) %>
  <% }) %>
<% }) %>

Object properties

The following object properties are passed to the template by default:

Name Description
id The ID of the object.
title The title of the object (articles and posts).
name The title of the object (categories, sections and topics).
description The description of the object categories, section and topics).
html_url The URL of the object.
position The position of the object (categories, sections, articles and topics).
promoted Whether or not the object is promoted (articles only).
pinned Whether or not the object is pinned (posts only).
draft Whether or not the object is a draft (articles only).
section_id The ID of the parent section (articles only).
parent_section_id The ID of the parent section (sections only).
category_id The ID of the parent or ancestor category (sections only).
topic_id The ID of the parent topic (posts only).
created_at The date and time that the object was created.

Events

Class Properties
navigation:render Fires when the navigation menu has been rendered.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Carousels Free

Carousels

Present content in well defined and easy to follow steps.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.