# 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 %}
---
# Agent Instructions: 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:
```
GET https://docs.foxecom.com/foxkit-app/sales-boosting/mega-menu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.
.png?alt=media&token=2d55e471-68de-413c-8041-8ae9c7f700a3)