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