> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/megamog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/megamog-theme/sales-boosting/mega-menu.md). # Mega menu Learn to elevate your store navigation with a seamless and user-friendly mega menu created with FoxKit A mega menu is an expanded and visually appealing menu that displays multiple navigation options and subcategories in a single dropdown panel. A well-designed mega menu simplifies the browsing process for your customers. * It provides a clear overview of your store's product categories and subcategories, allowing users to quickly find what they want. * It reduces the number of clicks required to navigate through your site, enhancing user satisfaction and encouraging exploration of your product offerings.

An example of FoxKit's Mega menu on Megamog theme

## Create a mega menu {% hint style="success" %} **Steps:** 1. In FoxKit > **FoxKit power** > choose **Mega menu** 2. Select **Create menu** {% endhint %} Give your menu a name and select the layout for it. You can choose 1 of the 2 layout options for your mega menu. It can be: * **Horizontal menu**: In a horizontal mega menu, the parent menu items stand at the top; and sub-items, or child menu items, spread out underneath them.

* **Vertical menu**: In a vertical mega menu, the parent menu items stand on the left side; and sub-items, or child menu items, branch out from them to the right.

Each submenu item can be chosen as: * Pure text link: Link the item to a certain collection, product, landing page, etc. * Text link with image banner: A menu banner can attract customers' attention and communicate your messages more effectively.

### General

* **Title**: Insert your menu item label; * **Link**: paste the page URL or select a page from your Shopify store that you want to link the menu item with, or simply leave it blank.

{% hint style="info" %} Include the full URL of that page, including the URL's HTTPS protocol. {% endhint %} * Check the option **Open link in a new tab** if needed. ### Submenu settings * Determine your **Submenu layout** as Mega/Dropdown;

* Select how the submenu is opened: by hovering/clicking; * Select the Dropdown container width: Full width/ Auto width; * Enable to show content in the container if needed; * Set the number of submenu columns: 1-6 columns or based on the number of submenu items being added to the menu item.

### Image Banner This feature lets you create a visually appealing **banner with an image**, heading, button, and optional custom styling. It can be used to highlight promotions, collections, or announcements on your storefront. * Image * Image Width * Heading * Button Label * Text Color * Custom Class

### Icon & Badge You can set the **Icon** and **Badge** for each menu item to attract customers or visitors' attention. {% tabs %} {% tab title="How the icon is added to the menu item" %}

{% endtab %} {% tab title="How the badge is added to the menu item" %}

{% endtab %} {% endtabs %}

#### Icon The **Icon** will be positioned beside the menu item label. Select your preferred icon in the **Select icon** field. Then, adjust the **Icon size** to fit the menu item (10px-50px) and change the **Icon color**.

#### Badge The **Badge** will be positioned next to the menu item label. Enable/Disable the **Badge** by toggling the **Show badge** option. Insert the content you want in the **Badge label** to show on the menu item. Then, you can also adjust the suitable **Badge background color** and **Badge text color** to highlight it**.**

### Visibility Select in what view that menu item and submenu items are displayed.

## Style your mega menu To change the styling of the mega menu, choose **Appearance**. Some details of the mega menu that you can change are: * Menu layout * Horizontal * Vertical * Menu width * Fill container * Fixed width * Menu bar background: Change color * Menu text color * Menu text hover color * Space between items * Submenu design * Background: Change color * Text: Change color * Text hover: Change color

## Change the settings of your mega menu * Title * Render method - **we recommend you don't change this option if you're not sure what it does** * Custom element * Replace by selectors * CSS Selector * CSS selector of mobile menu

{% hint style="info" %} Need help in adding the mega menu to your theme? Don't hesitate to drop us a message via our in-app live chat or email 💬 {% endhint %}