How to create a mega menu

A mega menu is an expandable navigation menu that displays multiple levels of links, options, and content within a single, structured layout. It makes it easier for visitors to explore your website and find what they need with fewer clicks, especially when managing larger product catalogs or content-heavy sites.

In DecoNetwork, the Website Editor gives you full control to design and customize mega menus using flexible layouts. You can enhance your menus with categories, images, icons, typography, and even videos to create a more engaging and intuitive navigation experience.

In this article

• Prerequisites
• Why use a mega menu
• How to create a mega menu
• Recreate the example mega menu layout
• Best-practice tips
• Troubleshooting
• FAQs
• Additional resources

Prerequisites

Why use a mega menu

Mega menus help users navigate your website more efficiently by displaying multiple levels of content in a single, structured view.

• Improve navigation: Help customers find products faster with fewer clicks.
• Showcase more content: Display categories, featured products, or promotions in one place.
• Enhance visual design: Use images, icons, and layouts to create engaging menus.
• Support large catalogs: Ideal for stores with many product categories.

How to create a mega menu

Step 1: Open Page Options

1. In the Website Editor, click on the DESIGN button in the Website Editor Toolbar.

   

2. Click on the PAGE OPTIONS menu item.

   The PAGE OPTIONS settings are displayed.

   
3. Locate the Dropdown menu setting.

4. Select one of the following options:

   

   • Specify Width (System Pages): makes the dropdown menu customizable and allows you to specify its width.

     Simply drag the sides of the menu container in the Content Area to adjust the width.

   • Content Width (System Pages): makes the dropdown menu customizable and makes its width fit the content.
   • Page Width (System Pages): makes the dropdown menu customizable and makes its width the full width of the page.
5. Click the Save button at the right of the Page Settings Bar.
6. Click OK in the Saving Page progress popup when saving is complete.

Step 2: Open the dropdown menu content

1. Click on the PAGES button in the Website Editor Toolbar.

   

2. Click on the + symbol to expand the Dropdown Menus tab under SYSTEM PAGES.

   

   Select the dropdown menu to edit its content layout.

3. Select a page (e.g., Products) to edit its menu..

   The menu is displayed in the Content Area as you would see it when it is expanded, containing default content.

   By default, the menu for the Products Page contains the Blank Product Categories Widget, using the Grid layout by default.

   

   Select the dropdown menu to edit its content layout.

   Click here to learn about the Blank Product Categories Widget.

Step 3: Configure the layout structure

1. Hover the mouse pointer over the row containing the menu content.
2. Click on the down button beside the Widget icon.

3. Select Row Settings from the dropdown menu.

   

4. Select the Number of fluid columns from the dropdown list (e.g., '3').

   
   This step defines how your mega menu is structured (e.g., columns for categories, brands, or featured products).
5. Click OK.

Step 4: Add and configure category widgets

1. In the Content Area, drag a widget (e.g. Blank Product Categories Widget) into the second column.

2. Click on the widget.

   The widget Settings popup is displayed.

   
3. Enter a name Panel title field, e.g. 'Apparel'.
4. Select a category from the Category dropdown list. (To replicate the example design above, select Apparel).

5. Click on the Design tab.

   

6. Chooser a layout (e.g. List).

   
7. Click on the Properties tab.

8. Set the Maximum Categories (e.g., 5).

   
9. Click OK.

Step 5: Add additional content (optional)

Clone a widget

1. Hover the mouse pointer over the widget you added earlier.
2. Click on the down button beside the widget icon.

3. Select Clone from the dropdown menu.

   

   A clone of the widget will be created below the existing widget.

4. Hover the mouse pointer over the widget clone.
5. Click on the down button beside the widget icon.

6. Select the Settings item from the dropdown menu.

   

   The Settings popup is displayed.

7. Enter a name into the Panel title field, e.g. 'Bags'.
8. Configure the other settings as needed. (If you are replicating the example menu above, select Bags from the Category dropdown list).
9. Click OK.
10. Repeat this process to add more clones of the same widget.

Add widgets

1. Click WIDGETS.
2. Drag widgets into your layout, such as:
   • Logos Widget (for brands)
   • Blank Product Listing Widget (for featured items)
   • Text Widget (for promotions or announcements)
3. Configure each widget’s settings as needed.

Step 6: Adjust layout and styling

1. Resize columns by dragging column borders.
2. Add background colors or styling via Row Settings → Background.
3. Edit text, images, and spacing for visual balance.

Step 7: Save and publish

1. Click Save.
2. Click OK when prompted.
3. Click Publish to make the mega menu live.

Recreate the example mega menu layout

Follow these steps to recreate the example mega menu layout shown above. These steps assume you have followed How to create a mega menu above already added and cloned the Blank Product Categories Widget in the middle column.

Step 1: Add the Brands (logos) column

1. Click on the WIDGETS button in the Website Editor Toolbar.

   

2. Drag the Logos Widget under the BUSINESS section into the first column.

   The Logos Settings popup is displayed.

   
3. In Logo Settings:
   • Set Panel title to Brands
   • Set Logo Type to Product Brands

   • Set Maximum Logos to 20

     
4. Click on the Design tab.

5. Select 100 from the Logo Size dropdown list.

   
6. Click OK.

Step 2: Adjust column widths for layout balance

1. Hover the mouse pointer over the right edge of the first column until the resize handle appears.

   
2. Drag the handle left so the logos display in a single vertical column.
3. Repeat for the second column:
   • Adjust width so category names fit comfortably without wrapping.

Step 3: Add the "New Arrivals" product section

1. Click on the WIDGETS button in the Website Editor Toolbar.

2. Drag the Blank Product Listing Widget (under the LIST section) into the third row in the Content Area.

   The Blank Product Listing Settings popup is displayed.

   
3. In settings:
   • Set Panel title to New Arrivals
   • Set List Display to Latest Products
   • Set Products Per Page to 8

4. Select the Design tab.

   

   On mobile versions of the site, menus can simplified using the Show as Link(s) in Mobile Menu option. When enabled, this option will generate matching links for the content placed in the custom dropdown menu that will be rendered as a simple list of links on the site's mobile menu.

5. Select Don't Show from the Product Colors dropdown list.

6. Select Show Above from the Add to Cart Button dropdown list.

   
7. Click OK.

Step 4: Add a promotional banner

1. Click on the WIDGETS button in the Website Editor Toolbar.

   
2. Drag the 1 Column Widget under the BASICS section to the bottom of the Content Area.
3. Hover the mouse pointer over the row containing the 1 Column Widget in the Content Area.
4. Click on the down button beside the widget icon.

5. Select Background from the dropdown list.

   

6. Click on the Silver color swatch in the Color Popup.

   
7. Click OK.
8. Click on the WIDGETS button in the Website Editor Toolbar.
9. Drag the Text Widget into the new column.
10. Hover the mouse pointer over the Text Widget.
11. Click on the down button beside the widget icon.

12. Select Text Settings from the dropdown menu.

    

    The Text Settings popup is displayed. The Text Properties tab containing the Rich Text Editor is selected.

    

13. Click on the Image toolbar button in the Rich Text Editor.

    

    The Image Properties popup is displayed.

    

14. Click on the Browse Server button.

    The File Browser is displayed. (The appearance of the File Browser will differ depending on the browser you are using).

15. Upload an image, such as a delivery van in the example, and select it.
16. In the Image Properties popup, click on the Lock Ratio icon.
17. Enter '100' in the Width field.
18. Click OK in the Image Properties popup.

19. Click on the Bold toolbar button in the Rich Text Editor.

    

20. Select 20 from the Font Size dropdown list.

    

21. Click on the Center toolbar button in the Rich Text Editor.

    
22. Override the sample text with your promotional text, e.g. "Free shipping with purchases of $50 or more.".

23. Click on the Source toolbar button in the Rich Text Editor.

    
24. Type 'vertical-align: middle;' within the style attribute of the img tag.
25. Click on the Layout Properties tab in the Text Settings Popup.
26. Click on the MARGIN section to expand it.

27. Select Medium from the Top Margin dropdown list.

    
28. Click OK.
This banner helps highlight promotions or key messaging directly within the menu.

Step 5: Save and publish

1. Click  OK → Save.
2. Click Publish to apply changes to your live site.

Best-practice tips

• Use clear category names to improve navigation.
• Limit the number of items per column to avoid clutter.
• Include visual elements (logos, images) to enhance engagement.
• Highlight key products or promotions within the menu.
• Test mobile behavior – menus can be simplified into links for smaller screens.{index=1}

Troubleshooting

The mega menu is not displaying correctly

• Ensure the Dropdown menu setting is enabled in Page Options.
• Check that changes have been Published.

Content looks misaligned

• Adjust column widths using drag handles.
• Review widget placement within columns.

FAQs

Can I customize the layout of a mega menu?
Yes. You can control columns, widgets, spacing, and styling using the Website Editor.

Can I add images or promotions to a mega menu?
Yes. Use widgets like Text, Logos, or Product Listings to enhance the menu.

How does the mega menu behave on mobile?
Mega menus can be simplified into standard link lists using mobile display options.

Additional Resources

• How to Enable and Configure a Dropdown Menu
• How to customize your navigation dropdown menu