---
title: How to Setup a Mega Menu
description: Learn how to set up a wide-format mega menu feature on your Indie Website's Main navigation with key UX best practices.
---

[Skip to content](https://help.indiegraf.com/how-to-set-up-a-mega-menu#main-content)

- [English](https://help.indiegraf.com/how-to-set-up-a-mega-menu)
- [Español](https://help.indiegraf.com/es/how-to-set-up-a-mega-menu)

English

Show submenu for translations

[Publisher Portal](https://portal.indiegraf.com/tickets?hsLang=en)

[![Indiegraf-PrimaryLogo-FullColor-1](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-PrimaryLogo-FullColor-1.png?width=262&height=60&name=Indiegraf-PrimaryLogo-FullColor-1.png)](https://help.indiegraf.com/?hsLang=en)

Open main navigation

Close main navigation

- - [English](https://help.indiegraf.com/how-to-set-up-a-mega-menu)
    - [Español](https://help.indiegraf.com/es/how-to-set-up-a-mega-menu)

  English
  
  Show submenu for translations
- [Publisher Portal](https://portal.indiegraf.com/tickets)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Indiegraf](https://help.indiegraf.com/?hsLang=en)
2. [Indie Website](https://help.indiegraf.com/indie-website?hsLang=en)
3. [Design & Page Layout](https://help.indiegraf.com/indie-website?hsLang=en#design-page-layout)

May 22, 2026

# How to Setup a Mega Menu

## Mega Menu feature is a wide-format view of your main navigation for publications and newsrooms with deep content structures who want to give readers a comprehensive overview of their sections under a primary topic or category at a single glance. 

On the Indie Website platform, mega menu setting is specifically designed for your sites **Main Menu**. Below is a step-by-step guide to setting one up, along with some important user experience best practices.

### How to Build a Mega Menu

1. **Navigate to your Menu settings:** Log into your website dashboard and go to **Appearance** \> **Menus**.  
   ![](https://help.indiegraf.com/hs-fs/hubfs/image-png-4.png?width=359&height=524&name=image-png-4.png)
2. **Select your Main menu:** Make sure you are editing your site's main navigation menu.  
   ![](https://help.indiegraf.com/hs-fs/hubfs/image-png-May-22-2026-03-36-38-6436-PM.png?width=925&height=334&name=image-png-May-22-2026-03-36-38-6436-PM.png)
3. **Choose a top-level link:** Click the dropdown arrow for that menu item, top-level menu item that you want to transform into a mega menu.  
   ![](https://help.indiegraf.com/hs-fs/hubfs/image-png-May-22-2026-03-38-35-5542-PM.png?width=709&height=530&name=image-png-May-22-2026-03-38-35-5542-PM.png)
4. **Enable the Mega Menu option:** Within that item's settings, check or select the option for **Mega Menu**.  
   ![](https://help.indiegraf.com/hs-fs/hubfs/image-png-May-22-2026-03-40-41-9201-PM.png?width=442&height=760&name=image-png-May-22-2026-03-40-41-9201-PM.png)
5. **Nest your sub-items:** Add the subsequent pages, subcategories, or links (for example, columns, features) to your menu structure. Drag and drop these items so they are indented and nested *directly underneath* your main mega menu item.  
   ![](https://help.indiegraf.com/hs-fs/hubfs/image-png-May-22-2026-03-49-08-2184-PM.png?width=530&height=475&name=image-png-May-22-2026-03-49-08-2184-PM.png)
6. **Save your configuration:** Click the **Save Menu** button.
7. **Test on your live site:** Visit your website homepage and hover over the top-level option to ensure the menu expands into a wide, multi-column layout.  
   ![](https://help.indiegraf.com/hs-fs/hubfs/image-png-May-22-2026-03-50-51-0859-PM.png?width=1325&height=212&name=image-png-May-22-2026-03-50-51-0859-PM.png)

### **Best Practices & User Experience (UX) Tips**

Because mega menus take up visual space when active, it's important to design your navigation with your readers' experience in mind:

- **Main Menu Exclusive:** Mega menus can only be configured on your Main menu. This feature is not available for Secondary menus, because it drops down and completely covers any secondary navigation menu positioned directly beneath.
- **Choose the Right Navigation Layout:** For an optimal desktop user experience, we highly recommend implementing one of these two setup choices: 
    - **Strategy A:** Use a **Mega Menu on your primary menu** and leave the secondary menu disabled. 
          - You have a Primary topic/category with 10+ relevant sub-items you would like to display below
    - **Strategy B:** Keep your main menu standard (no mega menu) and run a **standard Main menu + Secondary menu combination**.

 

- [Welcome to Indiegraf](https://help.indiegraf.com/welcome-to-indiegraf?hsLang=en)
- [Onboarding](https://help.indiegraf.com/onboarding?hsLang=en#main-content)

    - [Quick Start Guide](https://help.indiegraf.com/onboarding?hsLang=en#quick-start-guide)
- [Indie Website](https://help.indiegraf.com/indie-website?hsLang=en#main-content)

    - [Analytics & Growth](https://help.indiegraf.com/indie-website?hsLang=en#analytics-growth)
    - [Audience Engagement & Forms](https://help.indiegraf.com/indie-website?hsLang=en#audience-engagement-forms)
    - [Configuring your Homepage](https://help.indiegraf.com/indie-website?hsLang=en#configuring-your-homepage)
    - [Content Creation & Management](https://help.indiegraf.com/indie-website?hsLang=en#content-creation-management)
    - [Design & Page Layout](https://help.indiegraf.com/indie-website?hsLang=en#design-page-layout)
    - [Indiegraf Pay](https://help.indiegraf.com/indie-website?hsLang=en#indiegraf-pay)
    - [Media & Visual Assets](https://help.indiegraf.com/indie-website?hsLang=en#media-visual-assets)
    - [Paywall Solution: Pelcro](https://help.indiegraf.com/indie-website?hsLang=en#paywall-solution-pelcro)
    - [SEO and Google Tools](https://help.indiegraf.com/indie-website?hsLang=en#seo-and-google-tools)
    - [Site Administration](https://help.indiegraf.com/indie-website?hsLang=en#site-administration)
    - [Technical Questions](https://help.indiegraf.com/indie-website?hsLang=en#technical-questions)
- [Indie Email](https://help.indiegraf.com/indie-email?hsLang=en#main-content)

    - [Quickstart Video Guide: Indie Email](https://help.indiegraf.com/indie-email?hsLang=en#quickstart-video-guide-indie-email)
    - [Account Setup & Foundations](https://help.indiegraf.com/indie-email?hsLang=en#account-setup-foundations)
    - [Contact Management](https://help.indiegraf.com/indie-email?hsLang=en#contact-management)
    - [Creating Campaigns](https://help.indiegraf.com/indie-email?hsLang=en#creating-campaigns)
    - [Sending Campaigns & Automation](https://help.indiegraf.com/indie-email?hsLang=en#sending-campaigns-automation)
    - [Troubleshooting & Deliverability](https://help.indiegraf.com/indie-email?hsLang=en#troubleshooting-deliverability)
    - [Analytics](https://help.indiegraf.com/indie-email?hsLang=en#analytics)
- [Indie Ads Manager (IAM)](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#main-content)

    - [Reporting & Statistics](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#reporting-statistics)
    - [Essential Articles](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#essential-articles)
    - [Native Ad Templates](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#native-ad-templates)
    - [Quick Start Guide](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#quick-start-guide)
    - [Payment Solutions](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#payment-solutions)
- [Hearken](https://help.indiegraf.com/hearken?hsLang=en#main-content)

    - [Planning and Preparing to Launch with Hearken](https://help.indiegraf.com/hearken?hsLang=en#planning-and-preparing-to-launch-with-hearken)
    - [Collecting Questions](https://help.indiegraf.com/hearken?hsLang=en#collecting-questions)
    - [Collecting Votes](https://help.indiegraf.com/hearken?hsLang=en#collecting-votes)
    - [Reporting an Answer](https://help.indiegraf.com/hearken?hsLang=en#reporting-an-answer)
    - [Spreading Hearken Across Your Organization](https://help.indiegraf.com/hearken?hsLang=en#spreading-hearken-across-your-organization)
    - [Creating and Customizing an Embed](https://help.indiegraf.com/hearken?hsLang=en#creating-and-customizing-an-embed)
    - [Workflow Features](https://help.indiegraf.com/hearken?hsLang=en#workflow-features)
    - [Platform Features](https://help.indiegraf.com/hearken?hsLang=en#platform-features)
    - [Setting Up Notifications and Alerts](https://help.indiegraf.com/hearken?hsLang=en#setting-up-notifications-and-alerts)
    - [Setting up APIs and webhooks](https://help.indiegraf.com/hearken?hsLang=en#setting-up-apis-and-webhooks)
    - [Data collection and exporting](https://help.indiegraf.com/hearken?hsLang=en#data-collection-and-exporting)
    - [Automatic categorization](https://help.indiegraf.com/hearken?hsLang=en#automatic-categorization)
    - [Social, outreach, and marketing](https://help.indiegraf.com/hearken?hsLang=en#social-outreach-and-marketing)
    - [Events and In-Person Engagement](https://help.indiegraf.com/hearken?hsLang=en#events-and-in-person-engagement)
    - [Monetizing your Hearken work](https://help.indiegraf.com/hearken?hsLang=en#monetizing-your-hearken-work)
- [Indiegraf Experts](https://help.indiegraf.com/indiegraf-experts?hsLang=en)
- [Indiegraf Product Release Notes](https://help.indiegraf.com/indiegraf-product-release-notes?hsLang=en#main-content)

    - [Product Demo Videos](https://help.indiegraf.com/indiegraf-product-release-notes?hsLang=en#product-demo-videos)
- [General](https://help.indiegraf.com/general?hsLang=en)
- [RevEngine](https://help.indiegraf.com/revengine?hsLang=en#main-content)

    - [Getting Started with RevEngine](https://help.indiegraf.com/revengine?hsLang=en#getting-started-with-revengine)
    - [International giving](https://help.indiegraf.com/revengine?hsLang=en#international-giving)
    - [RevEngine Core](https://help.indiegraf.com/revengine?hsLang=en#revengine-core)
    - [Organization management](https://help.indiegraf.com/revengine?hsLang=en#organization-management)
    - [Working with Stripe](https://help.indiegraf.com/revengine?hsLang=en#working-with-stripe)
    - [Contribution page basics](https://help.indiegraf.com/revengine?hsLang=en#contribution-page-basics)
    - [Customizing your page](https://help.indiegraf.com/revengine?hsLang=en#customizing-your-page)
    - [Branding and images](https://help.indiegraf.com/revengine?hsLang=en#branding-and-images)
    - [Advanced page settings & features](https://help.indiegraf.com/revengine?hsLang=en#advanced-page-settings-features)
    - [Portal & contribution management](https://help.indiegraf.com/revengine?hsLang=en#portal-contribution-management)
    - [Contribution data](https://help.indiegraf.com/revengine?hsLang=en#contribution-data)
    - [Analytics and Reporting](https://help.indiegraf.com/revengine?hsLang=en#analytics-and-reporting)
    - [Best Practices and Recommendations](https://help.indiegraf.com/revengine?hsLang=en#best-practices-and-recommendations)
    - [Receipts, reminders and transactional communications](https://help.indiegraf.com/revengine?hsLang=en#receipts-reminders-and-transactional-communications)
    - [Security & Legal](https://help.indiegraf.com/revengine?hsLang=en#security-legal)
    - [Common issues](https://help.indiegraf.com/revengine?hsLang=en#common-issues)

[![Indiegrf](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-SecondaryLogo-DarkNavy-2.png?width=260&height=130&name=Indiegraf-SecondaryLogo-DarkNavy-2.png "Indiegrf")](https://help.indiegraf.com/?hsLang=en)

Indiegraf is on a mission to make local news entrepreneurship a great career and life choice for journalists everywhere.

<https://www.instagram.com/indiegrafmedia> <https://www.twitter.com/indiegrafmedia> <https://www.facebook.com/indiegrafmedia> <https://www.linkedin.com/indiegraf-media> [mailto:support@indiegraf.com](mailto:support@indiegraf.com)

Copyright © 2025, Indiegraf Media