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