> 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
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.
## 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 %}