Sections

Free

Premium

Category lists

Create custom category lists anywhere in the Help Center.

In this article

The objects available on each Zendesk page template are limited and can sometimes prevent you from creating the layouts that you want. The Category Lists plugin allows you to present a complete set of categories on any page using custom micro-templates.

A common use-case for this plugin is creating a static list of categories, present on every page for navigation purposes.

Example

The default template simply presents categories in an unstyled list.

Category list using default template 
  • <div data-element="category-list"></div>

You can fully style and customize the category list both in terms of its look-and-feel and functionality by specifying a custom micro-template as a plugin option.

Usage

Use data-element="category-list" on an element to create a list of categories.

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

The Category List plugin can be initialized using JavaScript:

<div id="category-list">...</div>

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

    new Categories(categoryList, {
      // Options go here
    });
  });
</script>

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. If the collection is not provided, the plugin will fetch categories from the Zendesk REST API.
properties array See below The list of properties from the REST API response to pass to the templating function.
template string
null		 null The name of the template to use.
templateData object {} Additional data to expose to the templating function.

The following article properties are passed to the templating function by default:

  • id
  • name
  • html_url
  • position

Events

Class Properties
categoryList.render Fires when the section list has been rendered.