> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/mega-menu.md).

# Mega menu

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Mega Menu** feature in the Flute theme allows you to create advanced and visually engaging navigation menus for your online store. You can organize your navigation into multiple levels and enhance it with **collections, products, blog posts, notable links**, and other promotional content.

A well-organized Mega Menu helps customers quickly find products and collections, improves store navigation, and creates a more premium shopping experience.

### Before You Begin

Before adding Mega Menu blocks in the Flute theme, you first need to create your store's navigation menu in the Shopify admin.

Shopify allows you to create **nested menu items**, where one or more menu items are placed underneath a main (top-level) menu item. These nested items appear as dropdown navigation in your store.

### Steps to Create a Navigation Menu

* From your Shopify admin, go to **Online Store > Content > Menus > Create menu**.

<figure><img src="/files/wWHokqZCxAYsQ3bJ6n6Q" alt=""><figcaption></figcaption></figure>

* Enter a name for your menu if you are creating a new one.
* Click **Add menu item.**
* Enter the **Name** of the menu item that you want customers to see.
* In the **Link** field, select where customers should be directed when they click the menu item.
* Click **Add menu item** again to add additional menu items to your navigation.
* To create a dropdown menu, click and drag a menu item below the main (top-level) menu item.
* Move the menu item slightly to the right until it appears nested below the main menu item.
* Repeat this process for all menu items you want to include in the dropdown.
* Click the **Save menu**.

<figure><img src="/files/NMy4CNHr6ZIEiGZZKIB0" alt=""><figcaption></figcaption></figure>

> **Tip:** Nested menu items appear under a top-level menu item and can be used to create dropdown or Mega Menu navigation structures in your store.

### Select the Navigation Menu in the Header

After creating your navigation menu, assign it to the Header.

{% hint style="success" %}
**Steps**&#x20;

1. From your Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** on your active theme.
3. Select the **Header** section.
4. Locate the **Menu** setting.
5. Select the navigation menu you created.
6. Click **Save**.
   {% endhint %}

Your navigation menu will now appear in your store's Header.

The Flute theme provides additional Header blocks that allow you to enhance your standard navigation with products, collections, blogs, and highlighted links.

### Available Mega Menu Blocks

The Flute theme provides multiple block types to help you create a more engaging navigation experience.

<table><thead><tr><th width="236">Block</th><th>Description</th></tr></thead><tbody><tr><td>Notable Link</td><td>Highlights an important navigation link to draw customer attention. It is ideal for links such as <strong>Sale</strong>, <strong>New Arrivals</strong>, or <strong>Special Offers</strong>.<a href="/pages/YZV5IATTVE9vezaqT8jo"> <em><mark style="color:$primary;">Learn more</mark></em></a></td></tr><tr><td>Product Menu</td><td>Displays selected or featured products within the menu, allowing customers to discover products directly from the Header navigation. <a href="#product-menu"><em><mark style="color:$primary;">Learn more</mark></em></a></td></tr><tr><td>Collection Menu</td><td>Displays selected collections within the menu, helping customers visually browse different product categories. <a href="#collection-menu"><em><mark style="color:$primary;">Learn more</mark></em></a></td></tr><tr><td>Blog Menu</td><td>Displays blog-related content within the navigation, making it easier for customers to discover articles, guides, or store updates. <a href="#blog-menu"><em><mark style="color:$primary;">Learn more</mark></em></a></td></tr><tr><td>Scrollbar Menu</td><td>Adds additional promotional or informational content to the menu, depending on the configured settings. <a href="#scrollbar-menu"><em><mark style="color:$primary;">Learn more</mark></em></a></td></tr><tr><td>Secondary menu</td><td> The <strong>Secondary Menu</strong> block allows you to display an additional navigation menu in the Header. <a href="#secondary-menu-block"><em><mark style="color:$primary;">Learn more</mark></em></a></td></tr></tbody></table>