# Vertical Menu

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fg9WbpKCWVeFOngHUcTqr%2Fheader_02.jpg?alt=media&#x26;token=588b5210-8999-45a4-9939-5d27f972b843" alt=""><figcaption></figcaption></figure>

This header layout features a **vertical navigation menu** placed on the left side of the page, creating a structured and easily accessible browsing experience. It’s ideal for eCommerce websites with extensive product categories, providing quick access to multiple sections while maintaining a clean and modern appearance.

This **Vertical Menu Header Type** efficiently combines **Badges**, **Megamenu functionality**, **Menu Icons**, **Contact Information**, and a **Top Bar**, providing an intuitive and highly navigable interface suitable for multi-category online stores or marketplaces.

**Location:** `Header → Header Design → Vertical Menu`

***

The **Vertical Menu** header layout positions the navigation along the side of the store, offering a clean and functional structure ideal for large product catalogs or multi-level menus.\
It includes settings for layout width, sticky behavior, logo customization, typography, padding, colors, and predictive search.\
The design supports a fixed menu panel and adaptive alignment for both desktop and mobile views.

***

## **Vertical Menu — Options Overview**

***

| **Category**                 | **Option**                                                                    | **Values / Inputs**                                                                              | **Description**                                                                                                  |
| ---------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| **Menu**                     | **Width**                                                                     | Default, Boxed, Wide                                                                             | Defines the header container width. The **Wide** option is optimized for screens 1440px and wider.               |
|                              | **Enable sticky header**                                                      | None, Mobile, Desktop, All screens                                                               | Determines where the header remains visible while scrolling.                                                     |
|                              | **Sticky header**                                                             | On scroll up, Always                                                                             | Controls how the sticky header appears during page scroll.                                                       |
| **Desktop Logo**             | **Image**                                                                     | Upload                                                                                           | Upload a logo image for desktop view.                                                                            |
|                              | **SVG code**                                                                  | Custom SVG input                                                                                 | Allows using an SVG instead of an image. The SVG must include defined **width** and **height** attributes.       |
|                              | **Logo width**                                                                | Numeric (px)                                                                                     | Sets the display width of the desktop logo.                                                                      |
| **Mobile Logo**              | **Image**                                                                     | Upload                                                                                           | Upload a logo image for mobile view.                                                                             |
|                              | **SVG code**                                                                  | Custom SVG input                                                                                 | Allows using an SVG for mobile logo; must include **width** and **height** attributes.                           |
|                              | **Logo width**                                                                | Numeric (px)                                                                                     | Defines the logo width for mobile devices.                                                                       |
| **Desktop Header Design**    | **Main menu font weight**                                                     | Normal, Bold                                                                                     | Adjusts the font weight for primary menu text.                                                                   |
|                              | **Logo position**                                                             | Left, Center                                                                                     | Aligns the logo within the vertical header area.                                                                 |
|                              | **Text for icons**                                                            | Hide, Show, Tooltip                                                                              | Determines whether icon text labels or tooltips are displayed.                                                   |
|                              | **Show menu dividers**                                                        | Toggle                                                                                           | Displays dividing lines between vertical menu items.                                                             |
|                              | **Icons size**                                                                | Numeric (px)                                                                                     | Sets the pixel size for icons next to menu labels.                                                               |
|                              | **Icons padding**                                                             | Numeric (px)                                                                                     | Adjusts spacing around icons for better visual balance.                                                          |
|                              | **Items padding**                                                             | Numeric (px)                                                                                     | Sets vertical and horizontal spacing between menu items.                                                         |
|                              | **Simple submenu top offset**                                                 | Numeric (px)                                                                                     | Allows fine-tuning of submenu positioning for single-level dropdowns.                                            |
|                              | **Megamenu top offset**                                                       | Numeric (px)                                                                                     | Adjusts the vertical position of megamenus for visual alignment.                                                 |
|                              | **Extra height**                                                              | Numeric (px)                                                                                     | Adds height to the menu area. Used when **State on home page** is set to “Opened”.                               |
|                              | **State on home page**                                                        | Closed, Opened (one section boxed), Opened (two sections boxed), Opened (one section full width) | Defines how the vertical menu appears on the homepage — closed by default or expanded in different layout modes. |
| **Bottom Line**              | **Show top line**                                                             | Toggle                                                                                           | Displays a dividing line above the vertical menu.                                                                |
|                              | **Width**                                                                     | Fullwidth, Content width                                                                         | Sets the width span of the bottom line area.                                                                     |
| **Colors Desktop**           | **Base**                                                                      | Color picker                                                                                     | Main text and icon color.                                                                                        |
|                              | **Accent**                                                                    | Color picker                                                                                     | Highlight color for active or hovered elements.                                                                  |
|                              | **Lines**                                                                     | Color picker                                                                                     | Color of dividers and separators.                                                                                |
| **Desktop Colors Continued** | **Menu button / Menu button text**                                            | Color picker                                                                                     | Defines colors for the vertical menu button and its label.                                                       |
|                              | **Link / Link hover**                                                         | Color picker                                                                                     | Colors for menu links and hover states.                                                                          |
|                              | **Link icon / Link icon hover**                                               | Color picker                                                                                     | Colors for icons beside links and their hover states.                                                            |
|                              | **Show all / Show all hover**                                                 | Color picker                                                                                     | Controls color of the “Show all” link and its hover state in expanded menus.                                     |
|                              | **Lines / Background**                                                        | Color picker                                                                                     | Customizes the color of separator lines and the background area.                                                 |
| **Menu Submenu**             | **Link / Link hover**                                                         | Color picker                                                                                     | Sets submenu link text color and hover color.                                                                    |
|                              | **Background**                                                                | Color picker                                                                                     | Defines the background color for submenu panels.                                                                 |
|                              | **Shadow**                                                                    | Color picker                                                                                     | Adds a drop shadow behind submenus for depth.                                                                    |
| **User Icons**               | **Icon / Text**                                                               | Color picker                                                                                     | Colors for user-related icons (cart, account, wishlist).                                                         |
|                              | **Icon hover / Text hover**                                                   | Color picker                                                                                     | Hover state colors for icons and text.                                                                           |
|                              | **Counter / Counter hover**                                                   | Color picker                                                                                     | Background color of item counters and their hover state.                                                         |
|                              | **Counter text / Counter text hover**                                         | Color picker                                                                                     | Colors for numbers inside counters (e.g., cart item count).                                                      |
| **Search**                   | **Background / Border / Text / Icon**                                         | Color picker                                                                                     | Defines colors for the search bar background, border, text, and search icon.                                     |
|                              | **Background hover / Border hover / Outline hover / Text hover / Icon hover** | Color picker                                                                                     | Sets hover states for all search-related elements.                                                               |
| **Predictive Search**        | **Heading**                                                                   | Color picker                                                                                     | Color for section heading in predictive search dropdown.                                                         |
|                              | **Link / Link hover**                                                         | Color picker                                                                                     | Defines colors for product or page suggestions and their hover states.                                           |
|                              | **Product vendor**                                                            | Color picker                                                                                     | Color for vendor names in search results.                                                                        |
|                              | **Product name / Product name hover**                                         | Color picker                                                                                     | Colors for product titles and hover effect.                                                                      |
|                              | **Price / Sale price / Old price**                                            | Color picker                                                                                     | Defines pricing display colors for products in predictive search.                                                |
|                              | **Show all / Show hover**                                                     | Color picker                                                                                     | Color settings for the “Show all results” link and its hover state.                                              |
|                              | **Lines / Background / Shadow**                                               | Color picker                                                                                     | Configures divider line color, dropdown background, and box shadow for predictive search results.                |

***

#### **Summary**

The **Vertical Menu** layout is ideal for stores with extensive product categories or multi-level navigation.\
It provides full control over menu alignment, icon styling, spacing, and submenu positioning.\
The color and predictive search options ensure consistent visual harmony with the rest of your store design.
