# Category Sidebar

The category tree that drives catalog filtering. Renders the catalog's category hierarchy as a collapsible tree, with optional product counts and a Clear button. Clicking a category filter actives the Catalog Display to that category's items.

> **Note on naming:** The palette label is **Category List**. The underlying file is `CategorySidebar2`.

![Category Sidebar showing a collapsible tree of categories with product counts and one branch expanded](/files/RNOUzrIcUa1ZrORh8FIx)

## Available in

* Catalog modules
* Public Page modules

## When to use

* The standard companion to **Catalog Display** in the sidebar slot of **Catalog Layout**.
* Any catalog with category hierarchy users would want to navigate.
* For catalogs with very few categories (or none), use **Dynamic Filters** instead — Category Sidebar adds noise to a flat catalog.

## Settings

| Setting                             | Description                                                                                               |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Enable Category Sidebar**         | Master on/off toggle. Default: Yes.                                                                       |
| **Sidebar Title**                   | Heading text shown above the tree. Default: *Categories*.                                                 |
| **Only Show Categories With Items** | Hide categories that contain no items. Default: No.                                                       |
| **Display Mode**                    | *Treeview* (collapsible tree, default) or *Checkbox* (flat list of checkboxes the user can multi-select). |
| **Show Clear Button**               | Show a *Clear* button to reset the category filter. Default: Yes.                                         |
| **Max Height (CSS)**                | Maximum height for the scrollable tree. Default: `24rem`.                                                 |
| **Show Product Count**              | Show item count next to each category. Default: Yes.                                                      |
| **Count Style**                     | How counts render — *text* (plain `(12)` after the name) or *badge* (a small pill). Default: text.        |

## What it depends on

Category Sidebar only renders categories if the linked catalog has **Catalog Categories** enabled. Without it, the sidebar renders but shows nothing.

**Check before you add this component:**

| What to verify                                         | Where                                                                 |
| ------------------------------------------------------ | --------------------------------------------------------------------- |
| **Catalog Categories** toggle is on                    | **Catalogs** → open the catalog → **Settings** → *Catalog Categories* |
| The catalog has been rebuilt after enabling the toggle | **Catalogs** list → **Reprocess** on the catalog row                  |
| The catalog is assigned to this workflow               | Workflow **Settings** tab → **Catalog** field                         |

If Category Sidebar is blank at runtime, the most common cause is a catalog that was built before Catalog Categories was turned on. Reprocess the catalog and the tree will populate.

## How it works

1. Reads the **Catalog Categories** data from the linked catalog's output.
2. Renders the category hierarchy as a collapsible tree — parents expand to reveal children.
3. Product counts include items in child categories (recursive).
4. When the user clicks a category, the selection is written to the app state as `selectedCategory`.
5. **Catalog Display** reads `selectedCategory` and filters its visible items — this is the only way Catalog Display knows which category filter is active.
6. The selected category's parent chain auto-expands so the user keeps the context visible.

{% hint style="info" %}
For catalogs with deeply nested categories, set **Max Height** generously (e.g. `40rem`) and let the tree scroll. Tight heights cause users to lose track of where they are in the hierarchy.
{% endhint %}

## Examples

**Standard B2B sidebar.** Category Sidebar with default settings, dropped into the Left Slot of Catalog Layout. Pairs with Catalog Display for the classic browse experience.

**Big-catalog narrow view.** Sidebar Title = *Browse*, Only Show Categories With Items = Yes, Max Height = `30rem`. Removes empty categories from a large hierarchy.

**Compact mobile-first.** Show Product Count = No, Show Clear Button = No, Max Height = `20rem`. Strips noise for a minimal sidebar that works well in the mobile Sheet drawer.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Category Display</strong></td><td>The dropdown / grid alternative for showing categories outside the sidebar.</td><td><a href="/pages/udRaPvzhitC3MaCaFCJl">/pages/udRaPvzhitC3MaCaFCJl</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>The block that filters its items based on the selected category.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>Catalog Layout</strong></td><td>The shell that wraps Category Sidebar + Catalog Display.</td><td><a href="/pages/a2TAHif0CxZaVsEtwolU">/pages/a2TAHif0CxZaVsEtwolU</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/catalog-components/category-sidebar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.