# Category Display

An alternative way to show catalog categories — either as a dropdown menu or as a grid of category tiles with drill-down breadcrumb navigation. Use this when **Category Sidebar** doesn't fit the layout (e.g. on mobile-first pages or when categories should be browseable as tiles).

> **Note on naming:** The palette label is **Categories**. The underlying file is `Category2`.

## Available in

* Catalog modules
* Public Page modules

## When to use

* Mobile-first catalog pages where a sidebar would take too much space.
* B2C catalogs where category tiles with images are part of the shopping experience.
* Catalogs with image-rich categories where browsing by visual is a goal.
* As a secondary category navigation in the page header (dropdown style).

For the standard sidebar tree, use **Category Sidebar** instead.

## Settings

| Setting                               | Description                                                                                  |
| ------------------------------------- | -------------------------------------------------------------------------------------------- |
| **Display as Grid**                   | Render as a grid of category tiles (Yes) or as a dropdown menu (No). Default: No (dropdown). |
| **Only Show Categories With Items**   | Hide empty categories. Default: No.                                                          |
| **Show Clear Button**                 | Show a *Clear* button to reset the filter. Default: Yes.                                     |
| **Show Collapsible Header**           | Show a header that the user can collapse. Default: Yes.                                      |
| **Header Title**                      | Header text. Default: *Categories*.                                                          |
| **Show Image** *(Grid mode only)*     | Show category images on each tile. Default: Yes.                                             |
| **Show Title** *(Grid mode only)*     | Show category title on each tile. Default: Yes.                                              |
| **Title Position** *(Grid mode only)* | Title placement: above, below, or overlay on the image. Default: above.                      |
| **Columns** *(Grid mode only)*        | Number of columns in the grid. Default: 5.                                                   |

## What it depends on

Like all category navigation blocks, Category Display reads from the **Catalog Categories** data in the linked catalog. If that data isn't included in the catalog, Category Display renders empty.

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

## How it works

**Dropdown mode** (default): renders as a dropdown menu showing the category hierarchy. Click a category to filter the catalog.

**Grid mode**: renders as a grid of category tiles. Click a tile to drill into that category's children. A breadcrumb trail appears at the top so users can navigate back up the hierarchy.

In both modes, selecting a category writes to `selectedCategory` in the app state and the active **Catalog Display** filters accordingly. Clicking the same category again deselects it.

{% hint style="info" %}
**Grid mode** is great for B2C — images and tiles invite exploration. **Dropdown mode** is better for B2B — compact, fast for power users who know what category they want.
{% endhint %}

## Examples

**B2C tiled categories.** Category Display with Display as Grid = Yes, Show Image = Yes, Title Position = overlay, Columns = 4. Used at the top of a B2C catalog above Catalog Display.

**Compact dropdown for navigation header.** Category Display in dropdown mode, dropped into a Header Nav slot or top of a sidebar.

**Mobile-friendly browse.** Grid mode with Columns = 2, Show Image = Yes, Title Position = below — works well in the Sheet drawer on mobile.

## 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 Sidebar</strong></td><td>The standard sidebar tree alternative.</td><td><a href="/pages/iHgOoEc4CBkQG9A3oaPT">/pages/iHgOoEc4CBkQG9A3oaPT</a></td></tr><tr><td><strong>Category Modal</strong></td><td>For pop-up category browsing on first visit.</td><td><a href="/pages/O3wri7ynmi7yC71d1He9">/pages/O3wri7ynmi7yC71d1He9</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>The product browse that responds to category selection.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</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-display.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.