Side navigation

Unpack the downloaded zip file. There will be the following files:
- lotus-sidenav.js
- lotus-sidenav.css
In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.
Click the theme you want to edit to open it.
Click the Edit code button.
In the Assets section, click Add asset, then browse to select your files.

Select the lotus-sidenav.js and lotus-sidenav.css files from unpacked zip. The files are added to your list of asset files.
In your theme code configuration page under the templates directory, click the document_head.hbs file.

In the document_head.hbs file, paste the following snippet:

<link rel="stylesheet" href="{{asset 'lotus-sidenav.css'}}" />
<script src="{{asset 'lotus-sidenav.js'}}"></script>

Add the component — Place the <sidenav-component> element in any template where you want the navigation to appear (e.g. article_page.hbs, section_page.hbs):
```
<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
></sidenav-component>
```
Click Publish.

All configuration is done through HTML attributes on the <sidenav-component> element.

Display

Attribute	Type	Default	Description
`button-text`	String	`"Browse help topics"`	Label for the mobile toggle button.
`show-current-category-only`	Boolean	—	When present, only sections from the current category are shown (without a category header). Can be used as a valueless attribute or set to `"true"`.

Responsive state

Attribute	Type	Default	Description
`force-open`	String / Boolean	`false`	A CSS media query string. When it matches, the sidenav opens automatically. The toggle button is hidden at this breakpoint.
`force-close`	String / Boolean	`false`	A CSS media query string. When it matches, the sidenav closes automatically.

Filtering

Filter which categories, sections, or articles appear in the navigation. Pass a JSON array of IDs.

Attribute	Type	Default	Description
`include-categories`	Array	`null`	Show only the categories with these IDs.
`exclude-categories`	Array	`null`	Hide the categories with these IDs.
`include-sections`	Array	`null`	Show only the sections with these IDs.
`exclude-sections`	Array	`null`	Hide the sections with these IDs.
`include-articles`	Array	`null`	Show only the articles with these IDs.
`exclude-articles`	Array	`null`	Hide the articles with these IDs.

Note: include-* and exclude-* attributes for the same level can be combined. The include filter is applied first, then the exclude filter.

Examples

Basic usage

Responsive sidenav that opens on desktop and collapses on mobile:

<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
></sidenav-component>

Show current category only

Display only the sections belonging to the category of the current page:

<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
  show-current-category-only
></sidenav-component>

Include specific categories

Show only selected categories by ID:

<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
  include-categories="[360003112240, 18775411794834]"
></sidenav-component>

Exclude categories

Hide specific categories while showing all others:

<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
  exclude-categories="[360003112240, 360003112180]"
></sidenav-component>

Custom button text

<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
  button-text="Menu"
></sidenav-component>

Combining filters

Include two categories but exclude a specific section within them:

<sidenav-component class="sidenav"
  force-open="(min-width: 1200px)"
  force-close="(max-width: 1199px)"
  include-categories="[360003112240, 18775411794834]"
  exclude-sections="[360003456789]"
></sidenav-component>

How it works

The component fetches categories and sections from the Zendesk Help Center API and caches them for 60 seconds.
Articles are fetched on demand when a section is expanded.
The current page (category, section, or article) is automatically highlighted and its parent sections are expanded.
Nested sections (sub-sections) are fully supported and rendered as a tree.
When multiple categories are present (or filtering is active), each category is displayed as a collapsible group containing its sections.
When only one category exists, sections are displayed directly without a category wrapper.

Finding IDs

Category, section, and article IDs can be found in the URL when viewing them in the help center or in the Zendesk admin panel under Guide > Arrange content. For example:

https://yoursite.zendesk.com/hc/en-us/categories/360003112240-Category-Name
https://yoursite.zendesk.com/hc/en-us/sections/360008765432-Section-Name
https://yoursite.zendesk.com/hc/en-us/articles/360012345678-Article-Title