Accessing {{category_tree_with_article}} or {{categories}} in header

I know this is an old post, but I'm running into the same problem. Any input, anyone? 

Is there a ZenDesk response to this? Adding the ability to put categories in the header would really open up many more navigation options.

Hi all -

At this time this is not possible. With curlybars, our Help Center templating language certain helpers and objects can only render on certain help center template pages. The best means to see what renders on which page is going to our Help Center templating Developer docs, select the template page in question, and seeing what is listed as available helpers, properties, or objects in the specific template you're working in. Unfortunately, category tree is not an option on the header template at this time.

However you could likely accomplish a category navigating via custom code in the header itself; I looked around and was not able to find any existing resources on this specific customization, however the options would be coding a navigation menu with href links or possibly using our Help Center API to ensure it's dynamic. 

Here's some JavaScript that I placed in my script.js file. I added an empty <ul id="support_categories"></ul> element into header.hbs where I wanted my categories menu to be located. Just replace "mysupportwebsite.com" with the domain name of your Zendesk help center.

var menu = '';
$.get('https://mysupportwebsite.com/api/v2/help_center/' + window.I18n.locale + '/categories.json', function(data) {
    if (data.categories.length) {
        $.each(data.categories, function(id, category) {
             menu = menu + '<li><a href="' + category.html_url + '">' + category.name + '</a></li>';
        });
        $('#support_categories').html(menu);
    }
});

Here's a way to add a single category to your header, make it translated, and not rely on Javascript for the initial render. It might look like a lot of work but it's very easy once you do it... Experience with JQuery and browser inspection helps.

First go to your dynamic content section and add some content, make sure to keep the key handy, mine is called knowledge_base



Next add in all the translations you want, I only have 2.

Now in the HTML of your header.hbs add the following markup where you want the plain anchor tag to render making sure to replace my key with whatever yours is:

<a id="my_link" href="#">{{dc 'knowledge_base'}}</a>

In your script.js file place the following making sure to replace yourdomain with your actual Zendesk domain just as with Scott's post above. This step is to find the index of your category.

$.get('https://yourdomain.com/api/v2/help_center/' + window.I18n.locale + '/categories.json', function (data) {
  console.log(data.categories);
});

Save script.js and reload your support home page, then right click and Inspect the window in Chrome or Inspect Element Firefox, now go to the console tab. You'll see an item called Array(some number of items), click the little down arrow next to it to expand it, you can expand each item to see more info and find the category you want to link to then look for the Index as shown in the screenshot, mine is 1.

Now update your snippet as shown below, make sure to replace the [1] with your data.category index you got from the last step.

$.get('https://yourdomain.com/api/v2/help_center/' + window.I18n.locale + '/categories.json', function (data) {
  $('#my_link').attr('href', data.categories[1].html_url);
});

That's it.

The only difference is instead of appending an element we're modifying the href attribute of an existing element that came from the Handlebars template so there will be no jump or render of the content on page load. The link will be replaced with the proper link for the language being viewed by the user as soon as the Javascript completes but the element will just jump to top of page if clicked before full load.

Edit: I've seen some errors getting window.I18n.locale in my experience over the last day. Instead you can use:

https://yourdomain.com/api/v2/help_center/en-us/categories.json

As your URL to fetch the categories if your Zendesk is in English, if not look for the language code in your url and replace en-us this should get results.