> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/header-group/header-blocks/vertical-menu.md).

# Vertical Menu

Category menu with vertical dropdown, customizable styling, and color scheme inheritance

**How to add the Vertical Menu block?**

* From your Shopify admin, go to **Online Store ->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* In the **Header Group -> Header ->** **Add block ->** choose **Vertical Menu.**

<figure><img src="/files/XMjgM49M56u3F6ECC4k0" alt=""><figcaption></figcaption></figure>

## Vertical Menu - Settings Guide

This guide explains all available settings for the **Vertical Menu** section in order from top to bottom as they appear in the Theme Editor.

| Setting                    | Type                      | Description                                           | Visibility                                 |
| -------------------------- | ------------------------- | ----------------------------------------------------- | ------------------------------------------ |
| Vertical Menu              | link\_list                | Menu source for vertical menu (default: main-menu).   | Always visible                             |
| Vertical Menu Style        | select                    | Visual style variant for vertical menu.               | Always visible                             |
| Title                      | text                      | Block title displayed above the vertical menu.        | Always visible                             |
| Inherit Color Scheme       | checkbox                  | Use section color scheme or override.                 | Always visible                             |
| Background / Gradient      | color / color\_background | Background for the vertical menu when not inheriting. | Visible when Inherit Color Scheme is false |
| Text Color                 | color                     | Text color for vertical menu when not inheriting.     | Visible when Inherit Color Scheme is false |
| Button Divider             | checkbox                  | Show dividers between vertical buttons.               | Always visible                             |
| Button Width               | select                    | Button width option (fit/large).                      | Always visible                             |
| Button Border Radius       | range (px)                | Button border radius.                                 | Always visible                             |
| Vertical Menu Color Scheme | color\_scheme             | Color scheme override for the vertical menu.          | Always visible                             |

### How to set up icon for a vertical menu?

<figure><img src="/files/iQAVFjKFJtPoQ4Y60fGt" alt=""><figcaption></figcaption></figure>

The small image displayed next to a menu item name will appear automatically when the uploaded image file name matches the menu item name.\
For example, if the menu item is **“Clothing, Shoes”**, you should upload an image named **`clothing-shoes`**.

**Note:**\
The image file name must be in **lowercase**, and all non-letter characters should be replaced with a hyphen (**-**).

<figure><img src="/files/Dts1W8pTdH0rTFWhSjcD" alt=""><figcaption></figcaption></figure>

Result:&#x20;

<figure><img src="/files/vDuLwcm3lU3Ex8P7EmSq" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://halosoft.gitbook.io/ella-7-documentation/header-group/header-blocks/vertical-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.