# Mega menu
Hyper theme offers a wide array of blocks for the mega menu, allowing you to create a highly functional and visually engaging navigation experience.
Steps:
1. In the theme editor (**Customize**), locate the **Header** section.
2. Click **Add block**, then select the add-on type you want for your menu.
3. Make necessary changes.
4. Click **Save**.
## Highlight link
This block allows you to make certain links stand out in the menu.
* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to highlight the menu item **"On Sale"**, ensure the spelling matches.
* **Color**: Select a custom color for the highlight. This makes the link visually distinct from others in the menu.
* **Style**: Choose a visual effect to enhance the link’s appeal. Available options include:
* **Text color** for having the menu item in a different color.
* **Star twinkle** for a subtle animated effect.
* **Button** to convert the link into a button.
## Custom link
Add a personalized link to your header navigation. This is ideal for including additional actions like “Find a Store,” “Track Order,” or any page that doesn’t already exist in your main menu.
* **Label**: Type the name you want for the custom link.
* **Link:** Use the **Link** field to connect the label to a specific page. You can:
* Select an existing page from the dropdown.
* Paste a URL for external pages or links.
* **Icon**: Choose a built-in icon that matches the purpose of the link. For instance, select the **Location** icon for a store locator.
Upload your own icon using the **Select** or **Explore free images** option.
* **Icon size**: Adjust the size of the icon to fit your design preferences.
## Banner (Mega menu)
Add banners to your mega menu to enhance navigation and showcase promotions or featured content.
* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a banner to the menu item 'Shop By Categories', ensure the spelling matches.
* **Menu columns**: Set the number of columns for your nested menu items.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
* **Color**: Select a color to highlight it from others.
* **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Banner settings:**
* **Width**: Adjust the width of the banner.
* **Number of columns**: Specify how many columns the banners take up.
* Add **up to 5 banners** in each main menu item.
Each banner can be customized individually.
* **Color scheme**: Choose a predefined color scheme for the banner. See [Colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors)
* **Image**: Upload a relevant image or choose one from Shopify’s free image library.
* **Subheading, heading, description**: Add content for the banner.
* **Button label** and **Button style:** Add a call-to-action button to the banner and choose the style for it.
* **Content position** and Content alignment: Decide how the content show over the banner.
* **Link**: Add the destination link for the button.
## Custom card
Feature stunning image cards in your mega menu.
* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a custom card to the menu item 'Chairs & Stools', ensure the spelling matches.
* **Menu columns**: Set the number of columns for your nested menu items.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
* **Color**: Select a color to highlight it from others.
* **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Card settings:**
* **Width**: Adjust the width of the banner.
* **Number of columns**: Specify how many columns the custom cards take up.
* Add **up to 5 custom cards** in each main menu item.
Each banner can be customized individually.
## Product list
Add a featured product list to your mega menu to boost sales.
* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a banner to the menu item 'Tables & Desks', ensure the spelling matches.
* **Menu columns**: Set the number of columns for your nested menu items.
* **Show menu column divider**: Toggle this on/off to display a divider between menu columns for better structure.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
* **Color**: Select a color to highlight it from others.
* **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Products list**:
* **Heading**: Give the product list a heading.
* **Width**: Adjust how much space the product list takes up in the menu dropdown.
* **Number of columns:** Choose how many product columns to display.
* **Products:** Select the products you want to display in your mega menu.
* **Show vendor**: Enable this setting to display the vendor/brand name for the products.
* **Show type**: Toggle this on to display the product type.
## Sidebar
Organize and display your store categories with added visuals. 2nd-level menu items will be display as a sidebar on the left.
This works best when the **3rd-level menu items are collections**.
A menu with 3-level nested items is suggested.
See [Editing menus](https://help.shopify.com/manual/online-store/menus-and-links/editing-menus).
**Settings include:**
* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a banner to the menu item 'Shop By Room', ensure the spelling matches.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
* **Color**: Select a color to highlight it from others.
* **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Right sidebar:**
* **Menu columns**: Adjust the number of columns of 3rd-level items to organize content.
* **Show collection image**: Display a featured image for each collection in the sidebar.
* **Use the first product image as the collection image:** Automatically use the first product’s image from the collection instead of a custom collection image.
* **Image ratio**: Define how the collection images are displayed.
To display collection images in the Sidebar Mega Menu, you’ll need to configure a Shopify metafield with the specified namespace and key. Follow these steps:
**Step 1: Add the Metafield definition**
1. Go to **Settings > Custom Data** in your Shopify admin.
2. In **Collections**, click **Add definition**.
3. 
4. Fill in the following details:
* **Namespace and Key**: `foxtheme.collection_megamenu_image`
* **Select type:** File.
5. Click **Save** to create the metafield definition.
**Step 2: Assign images to collections**:
1. Go to **Products** > **Collections** in your Shopify admin.
2. Select the collection you want to edit.
3. Add the metafield value under the newly created custom field (e.g., upload the desired image).
