--- title: How to use Megamenu Navigation description: "``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation ``` From here, You can configure the Top Navigation and Menu Labels for your store using Simple Menu Links, Megamenu, or Dropdown options. ## Single Links From…" url: "https://www.adornthemes.com/knowledge-base/how-to-use-megamenu-navigation/" updated: "2025-05-23" category: Navigation --- # How to use Megamenu Navigation ``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation ``` From here, You can configure the Top Navigation and Menu Labels for your store using Simple Menu Links, Megamenu, or Dropdown options. ## Single Links From your shopify store admin : ``` Click Online Store --> Customize --> Sections --> Main Navigation --> Add Single Links ``` Set Links Name and Select Menu Link. ## Dropdown Menu [**How to create dropdown menu**](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus) From your shopify store admin : ``` Click Online Store --> Customize --> Sections --> Main Navigation --> Add Dropdown Menu ``` Set Link Name, Menu Link and Select Dropdown Menu ## MM Simple - Display Up to 6 Menu Columns in this Megamenu - Display up to 4 Image Banners at Right or Bottom From your shopify store admin : ``` Click Online Store --> Content --> Menus --> Add Menu with Sub Menu Items As display below. ``` below screenshot is only for reference ![Shopify multi level menu](https://adornthemes.com/wp-content/uploads/2019/06/mm-simple-nav.png) ``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation --> Add MM Simple ``` Add Links Name, Select Menu, Set Columns, Set Image Banners(Optional). Below are few designs for MM Simple (Simple Megamenu navigation) ![](https://adornthemes.com/wp-content/uploads/2019/06/megamenu-simple-2.jpg) ![](https://adornthemes.com/wp-content/uploads/2019/06/megamenu-simple-3.jpg) ![](https://adornthemes.com/wp-content/uploads/2019/06/megamenu-simple-4.jpg) ## MM Products From your shopify store admin : ``` Click Online Store --> Customize --> Sections --> Main Navigation --> Add MM Products ``` - Display Featured Products on Left or fullwidth - Display Banner With or Without Text on Right Side(Optional) Add Links Name, Menu Link and Select Collection to display products. Set Products Limit, Columns and Buttons. Set Featured Column with image, title, subtitle, buttons and link. Here are few designs for MM Products. ![](https://adornthemes.com/wp-content/uploads/2019/06/1.jpg) ![](https://adornthemes.com/wp-content/uploads/2019/06/3-1.jpg) ![](https://adornthemes.com/wp-content/uploads/2019/06/4-1.jpg) ## MM Top Image Columns - Display Up to 5 Columns with Image On Top - Display Up to 5 Images Banner with Title and Links ``` Store Admin --> Online Store --> Content --> Menus --> Add Menu with Sub Menu Items. ``` To use Megamenu Top Image Columns, you need to create different menus for each columns. I.e. If you want to display 4 columns to Display Women, Men, Kids, and Accessories collection then you need to create 4 different menus with sub menu links for each column. Follow this article to read more in details : [How to create Menu?](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links#adding-a-new-menu) Now Go to : ``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation --> Add MM Top Image Columns ``` Display up to 5 columns with Column title, image, image links and menus Here are few designs for this megamenu. ![Image with links in megamenu](https://adornthemes.com/wp-content/uploads/2019/06/style-1.jpg) ![5 column Image with links in megamenu](https://adornthemes.com/wp-content/uploads/2019/06/style-2.jpg) ## MM Background Image - Display Up to 6 Columns with Background Image ``` Store Admin --> Online Store --> Content --> Menus --> Add Menu with Sub Menu Items As display below ``` Reference screenshot ![](https://adornthemes.com/wp-content/uploads/2019/06/mm-simple-nav.png) Now Go to : ``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation --> Add MM Background Image ``` Below is reference design for this megamenu style ![Set Background image in megamenu navigation](https://adornthemes.com/wp-content/uploads/2019/06/style.jpg) ## MM Advanced - For Avone Theme ``` Store Admin --> Online Store --> Content --> Menus --> Add Menu with Sub Menu Items As display below. ``` Reference screenshot ![](https://adornthemes.com/wp-content/uploads/2019/06/mm-advanced.jpg) ``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation --> Add MM Advanced ``` Add Link Name, Menu Link, Select Menu, Set Columns for Sub menu links and select collections from **products block** to display products on right side of menu for each main links ( Which display on left side of menu) . Below are few designs for MM Advanced ![Advanced megamenu in Avone Theme](https://adornthemes.com/wp-content/uploads/2019/06/mm-advanced1.jpg) ## MM Custom HTML - Display Custom HTML ``` Store Admin --> Online Store --> Customize --> Sections --> Main Navigation --> MM Custom HTML ``` Set Custom HTML code here ## Set Menu Labels ![Add navigation menu labels in Avone](https://adornthemes.com/wp-content/uploads/2019/06/menu-labels-1.jpg) Explore [various demo stores](https://adornthemes.com/avone/) to view live examples.