Sections

Core concepts

Setup

Base styles

Plugins

Category lists

Create custom category lists anywhere in the Help Center.

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.

Usage

Via data attributes

Use data-element="category-list" on an element to create a list of categories. The default template simply presents categories in an unstyled list.

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

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

Via JavaScript

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-.

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
sectionList.render Fires when the section list has been rendered.