# Titles Menu

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FCEAhXn9yprT6OGzuLMxL%2Fheader_03.jpg?alt=media&#x26;token=f71ded2e-de96-4b61-93be-3efaf1c78bcc" alt=""><figcaption></figcaption></figure>

This header layout presents a **visually rich and structured megamenu design** where each main navigation item is represented by a **titled menu block with icons**. It enhances user navigation through clear visual hierarchy and organized category grouping.

This **Titles Menu Header Type** effectively combines **Megamenu functionality**, **Menu Icons**, **Contact Information**, and a **Top Bar**, providing an engaging and easy-to-navigate interface ideal for large online stores or theme showcases.

**Key features:**

* Prominent menu titles with optional icons and badges
* Integrated megamenu for structured navigation
* Support for contact information and top bar links
* Stylish and dynamic layout suitable for large catalogs

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

***

### **Titles Menu — Options Overview**

***

| **Category**               | **Option**                                                                    | **Values / Inputs**                | **Description**                                                                                          |
| -------------------------- | ----------------------------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------- |
| **Menu**                   | **Width**                                                                     | Default, Boxed, Wide               | Defines the menu container width. The **Wide** option is optimized for screens 1440px wide and above.    |
|                            | **Enable sticky header**                                                      | None, Mobile, Desktop, All screens | Determines where the header remains fixed during scrolling.                                              |
|                            | **Sticky header**                                                             | On scroll up, Always               | Defines how the sticky header behaves when scrolling.                                                    |
| **Desktop Logo**           | **Image**                                                                     | Upload                             | Upload a logo image for desktop view.                                                                    |
|                            | **SVG code**                                                                  | Custom code                        | Allows using an SVG file instead of an image. The SVG must include **width** and **height** attributes.  |
|                            | **Logo width**                                                                | Numeric (px)                       | Adjusts the display width of the desktop logo.                                                           |
| **Mobile Logo**            | **Image**                                                                     | Upload                             | Upload a logo image for mobile view.                                                                     |
|                            | **SVG code**                                                                  | Custom code                        | Enables using an SVG file for the mobile logo. The SVG must contain **width** and **height** attributes. |
|                            | **Logo width**                                                                | Numeric (px)                       | Adjusts the width of the mobile logo.                                                                    |
| **Desktop Header Design**  | **Main menu font weight**                                                     | Normal, Bold                       | Sets the font weight for menu titles.                                                                    |
|                            | **Logo position**                                                             | Left, Center                       | Defines the logo alignment in the header.                                                                |
|                            | **Search**                                                                    | Hide, Opened, Closed               | Controls the search bar’s visibility and behavior in the header.                                         |
|                            | **Text for icons**                                                            | Hide, Show, Tooltip                | Determines how labels or tooltips display under or beside icons.                                         |
|                            | **Tiles per row**                                                             | 2–10                               | Defines how many tile elements appear in a single row.                                                   |
|                            | **Icons size**                                                                | 20–60px                            | Adjusts the size of the icons within each tile.                                                          |
| **Bottom Line**            | **Show top line**                                                             | Checkbox                           | Displays a dividing line above the menu section.                                                         |
|                            | **Show middle line**                                                          | Checkbox                           | Displays a dividing line between tiles and the bottom header area.                                       |
|                            | **Show bottom line**                                                          | Checkbox                           | Displays a dividing line at the bottom of the header.                                                    |
|                            | **Width**                                                                     | Fullwidth, Content width           | Defines the horizontal span of the bottom line section.                                                  |
| **General Background**     | **Width**                                                                     | Fullwidth, Content width           | Determines if the general background covers the entire width or is restricted to the content area.       |
| **Main Header Background** | **Background**                                                                | Hide, Color, Gradient, Image       | Sets the background type for the main header area.                                                       |
| **Colors (Desktop)**       | **Base**                                                                      | Color picker                       | Defines the main text and icon color.                                                                    |
|                            | **Accent**                                                                    | Color picker                       | Sets the accent color for active or highlighted elements.                                                |
|                            | **Lines**                                                                     | Color picker                       | Adjusts the color of header dividing lines.                                                              |
| **Tiles**                  | **Border**                                                                    | Color picker                       | Defines the border color around tiles.                                                                   |
|                            | **Show background**                                                           | Toggle                             | Enables or disables a solid background for tiles.                                                        |
|                            | **Background / Background gradient**                                          | Color or gradient                  | Defines the background color or gradient for tiles.                                                      |
|                            | **Text / Icon**                                                               | Color picker                       | Sets default text and icon colors inside tiles.                                                          |
|                            | **Show background on hover**                                                  | Toggle                             | Enables a different background when a tile is hovered.                                                   |
|                            | **Background hover / Background gradient hover**                              | Color or gradient                  | Defines hover background or gradient colors.                                                             |
|                            | **Text hover / Icon hover**                                                   | Color picker                       | Controls text and icon color on hover.                                                                   |
|                            | **Enable shadow**                                                             | Toggle                             | Adds a shadow effect behind each tile for depth.                                                         |
| **Tiles Menu Submenu**     | **Link / Link hover**                                                         | Color picker                       | Defines submenu link colors and hover colors.                                                            |
|                            | **Background**                                                                | Color picker                       | Sets submenu background color.                                                                           |
|                            | **Shadow**                                                                    | Color picker                       | Adds shadow to the submenu dropdown.                                                                     |
| **User Icons**             | **Icon / Text**                                                               | Color picker                       | Sets the color for header user icons (e.g., account, cart).                                              |
|                            | **Icon hover / Text hover**                                                   | Color picker                       | Defines hover state colors for icons and labels.                                                         |
|                            | **Counter / Counter hover**                                                   | Color picker                       | Sets the background for item counters (e.g., cart quantity).                                             |
|                            | **Counter text / Counter text hover**                                         | Color picker                       | Controls the color of counter numbers.                                                                   |
| **Opened Search**          | **Background / Border / Text / Icon**                                         | Color picker                       | Sets colors for the active search bar background, border, text, and icons.                               |
|                            | **Background hover / Border hover / Outline hover / Text hover / Icon hover** | Color picker                       | Defines hover colors for interactive search bar elements.                                                |
| **Predictive Search**      | **Heading**                                                                   | Color picker                       | Sets color for the predictive search heading.                                                            |
|                            | **Link / Link hover**                                                         | Color picker                       | Adjusts color for search suggestion links and hover states.                                              |
|                            | **Product vendor**                                                            | Color picker                       | Defines vendor name color in search results.                                                             |
|                            | **Product name / Product name hover**                                         | Color picker                       | Controls product name colors in suggestions.                                                             |
|                            | **Price / Sale price / Old price**                                            | Color picker                       | Defines colors for pricing and discounts in search results.                                              |
|                            | **Show all / Show hover**                                                     | Color picker                       | Sets color for the “Show all results” link and its hover state.                                          |
|                            | **Lines / Background / Shadow**                                               | Color picker                       | Customizes dividers, background, and shadow in the predictive search panel.                              |
