Navigation & Content
      Back to home
      1. CatapultCMS Help
      2. Implementation
      3. Navigation & Content

      How to Use and Manage the Mega Menu Navigation Style

      Learn how to format a 3 level navigation or mega-menu!

      The Mega Menu is one of the most powerful and user-friendly navigation styles available for large district websites. This guide will walk you through everything you need to know to set up, manage, and optimize your Mega Menu, including its structure, the “More” functionality, how to add images, and best practices for organization.

      Check out this template to reorganize your navigation here.

      Overview: What Is a Mega Menu?

      The Mega Menu is a three-level navigation structure ideal for large sites with many pages. It allows for:

      • Better content organization

      • Easy discoverability for parents and users

      • Visual enhancements with images

      • Built-in protections to maintain a clean, attractive look

      The Mega Menu is particularly recommended for district-level sites due to its scalability and design flexibility.

      Mega Menu Structure (Three-Level Navigation)

      The Mega Menu is built with three levels of navigation:

      1. Top-Level Page (e.g., Divisions)

      2. Second-Level Page (e.g., Business Services)

      3. Third-Level Page (e.g., Buildings & Grounds, Energy Management)

      Each section must contain all three levels to trigger the Mega Menu format. If only two levels are present, a standard dropdown will be used instead to keep the design consistent and prevent display issues.

      Note: Mixing two-level and three-level sections in the same nav can create inconsistent layouts. Stick with one or the other per section for best results.

      Backend Navigation Management

      To manage the Mega Menu:

      • Use the page tree in the CMS to drag and drop pages into the correct hierarchy.

      • Ensure each Mega Menu section has three levels of pages.

      • Pages without subpages will default to simple dropdowns.

      If you want a page to not display in the nav, you can mark it as hidden—this keeps it active and accessible via direct links but excludes it from the visible menu.

      The “More” Functionality

      To prevent overcrowding in the top-level navigation, the Mega Menu includes an automatic “More” dropdown:

      • If your design allows 7 top-level items, the 8th and beyond will appear under More.

      • The specific limit depends on your site design. There’s no visible indicator in the CMS—you’ll see the “More” item appear once the threshold is passed.

      • This setting is customizable—we can configure the menu to limit it to 3, 5, or any number of top-level items.

      Example:

      • Your top nav includes: Divisions, Board, Calendar, Students, Parents, Staff, Employment.

      • If you add "Staff Directory" and it exceeds your max, it will automatically move under More.

      This keeps your navigation looking professional and prevents layout issues such as multi-line nav bars.

      Adding Images to Navigation Items

      Images can enhance your navigation by adding visual context.

      Where Images Appear:

      • Only second-level navigation pages support images.

      • The image appears in the dropdown and is linked to the corresponding page.

      How to Add an Image:

      1. Navigate to the Page Properties of a second-level page.

      2. In the General tab, locate:

        • Page Title: Used in the nav.

        • Tagline: A short description beneath the title.

        • Featured Photo: Upload from File Manager (consider creating a “navigation” folder).

        • Icon: Choose from system icons or upload your own. (Stock icons are available; ask your support team to enable them.)

      Tip: Not every nav item needs an image—use them strategically for the best visual effect.

      Previewing & Publishing

      Due to JavaScript and layout rules, the CMS editor preview may not exactly match the final live site.

      To see your changes:

      • Use the Preview or Publish to Staging option.

      • For full changes to apply, use Force Page Upload when publishing.

      • Note: Navigation changes may take longer to publish due to site-wide updates.

      Best Practices

      • Use the Mega Menu for District Sites Only: School sites are often better served by simpler dropdowns.

      • Don’t Overload the Nav: Keep the top-level menu concise and allow the “More” feature to do its job.

      • Plan Navigation Structure Carefully: Group related items under logical categories to improve usability.

      • Use Hidden Pages Strategically: Keep pages active without cluttering the nav.

      • Limit Images: Only use images where they add real value.

      Summary

      The Mega Menu is a robust, flexible, and attractive navigation system perfect for large websites. By understanding how to structure your pages and take advantage of built-in features like “More” and image support, you can create a user-friendly experience that scales beautifully with your site.

      Check out this template to reorganize your navigation here.

      For help customizing your Mega Menu or adjusting the item limits, contact our support team.