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
- Navigate to your Menu settings: Log into your website dashboard and go to Appearance > Menus.
- Select your Main menu: Make sure you are editing your site's main navigation menu.
- 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.
- Enable the Mega Menu option: Within that item's settings, check or select the option for Mega Menu.
- 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.
- Save your configuration: Click the Save Menu button.
- 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.
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.
- Strategy A: Use a Mega Menu on your primary menu and leave the secondary menu disabled.