> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/category-menu.md).

# Category Menu

#### 1. Overview

The **Category Menu** allows you to display your product or content hierarchy in the **Header** area of your website. It helps users navigate easily through different sections.\
You can create up to **three levels of categories** and optionally display **category images** to enhance visual appeal.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FWICXzEVOhhToTHWpODvL%2Fimage.png?alt=media&amp;token=9d863dab-d702-4bcc-8361-0e7b2dda02cd" alt=""><figcaption></figcaption></figure>

#### 2. How to Use

**Step 1. Select an Existing Menu**

* Go to your website **Header settings** area.
* Locate the **“Category Menu”** section.
* From the dropdown list, select an **existing menu**.

  > ✅ **Tip:** Choose a menu that contains **Level 1, Level 2, and Level 3 categories** to make the display more complete and visually engaging.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FIyLOFqcvWSZxJiCuftwh%2Fd6f41c0e-d4f3-4b27-a372-09d3ce54cc81.png?alt=media&amp;token=76efc56a-c4fc-4072-bef9-322fbc450da8" alt=""><figcaption></figcaption></figure>

***

**Step 2. Enable Category Images (Optional)**

1. In the category menu settings, toggle on the **“Show Category Image”** option.
2. By default, the system will use the **first product image** under each category as its thumbnail icon.

   > 💡 **Tip:** You can upload a custom image for a category if you want a specific visual to be displayed instead of the default.

***

**Step 3. Add a Category Image Block (Optional)**

If you want to display category images with links directly in the Header:

1. In the Header area, add a new block:\
   **Block Type:** `Category menu - image`
2. Configure the block:
   * Select the category you want to display
   * Upload or choose a category image
   * Set the link target (e.g., category page, collection, or campaign page)
3. Save and refresh your site to preview the results.

***

#### 3. Design Recommendations

* **Clear structure:** Keep Level 1 categories concise — ideally between 5 and 8 items.
* **Consistent visuals:** Use images with the same dimensions for a clean look.
* **Smooth interaction:** For Level 3 menus, consider using hover or click-to-expand behavior.