--- title: How to Use and Manage the Mega Menu Navigation Style description: "Learn how to set up and manage a Mega Menu (Three-Level Navigation) on your district website using CatapultCMS. This article walks through the structure of mega menus, including how to organize content into first, second, and third-level navigation, use the \"More\" functionality to avoid overcrowded menus, include hidden pages, and add images to navigation items. It also highlights best practices for navigation design and explains key differences between how the CMS previews your nav and how it appears live." --- [Skip to content](https://support.catapultcms.com/how-to-format-your-mega-menu#main-content) English Show submenu for translations [Submit a Ticket](https://support.catapultcms.com/kb-tickets/new?hsLang=en) [![catapult-cms-logotype](https://support.catapultcms.com/hs-fs/hubfs/catapult-cms-logotype.png?width=300&height=59&name=catapult-cms-logotype.png)](https://support.catapultcms.com/migration?hsLang=en) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://support.catapultcms.com/kb-tickets/new) - [CatapultCMS.com](https://catapultcms.com/) [CatapultCMS.com](https://catapultcms.com/) Welcome to Catapult Support Knowledge Base! - There are no suggestions because the search field is empty. 1. [CatapultCMS Help](https://support.catapultcms.com/?hsLang=en) 2. [CMS](https://support.catapultcms.com/cms?hsLang=en) 3. [Implementation](https://support.catapultcms.com/cms?hsLang=en#implementation) # 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.](https://docs.google.com/spreadsheets/d/1pNzsO6zxciTETULBPPMqq8ZE29W1YEEXT4gi9PnLd_Q/edit?gid=1759406518#gid=1759406518) #### 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.](https://docs.google.com/spreadsheets/d/1pNzsO6zxciTETULBPPMqq8ZE29W1YEEXT4gi9PnLd_Q/edit?gid=1759406518#gid=1759406518) For help customizing your Mega Menu or adjusting the item limits, contact our support team.   - [CMS](https://support.catapultcms.com/cms?hsLang=en#main-content) - [Getting Started with Catapult CMS](https://support.catapultcms.com/cms?hsLang=en#getting-started-with-catapult-cms) - [The Dashboard](https://support.catapultcms.com/cms?hsLang=en#the-dashboard) - [General Editing Information](https://support.catapultcms.com/cms?hsLang=en#general-editing-information) - [Basic Elements](https://support.catapultcms.com/cms?hsLang=en#basic-elements) - [Visual Elements](https://support.catapultcms.com/cms?hsLang=en#visual-elements) - [File Management](https://support.catapultcms.com/cms?hsLang=en#file-management) - [Integrations](https://support.catapultcms.com/cms?hsLang=en#integrations) - [Compliance](https://support.catapultcms.com/cms?hsLang=en#compliance) - [Configuration](https://support.catapultcms.com/cms?hsLang=en#configuration) - [Implementation](https://support.catapultcms.com/cms?hsLang=en#implementation) - [Connect](https://support.catapultcms.com/connect?hsLang=en#main-content) - [Manage Users](https://support.catapultcms.com/connect?hsLang=en#manage-users) - [SIS Configuration](https://support.catapultcms.com/connect?hsLang=en#sis-configuration) - [Dashboard](https://support.catapultcms.com/connect?hsLang=en#dashboard) - [Other](https://support.catapultcms.com/connect?hsLang=en#other) - [Organization & Site Resources](https://support.catapultcms.com/connect?hsLang=en#organization-site-resources) - [Messages](https://support.catapultcms.com/connect?hsLang=en#messages) - [Emergency Resources](https://support.catapultcms.com/connect?hsLang=en#emergency-resources) - [Implementation](https://support.catapultcms.com/connect?hsLang=en#implementation) - [APP](https://support.catapultcms.com/app?hsLang=en#main-content) - [App Management](https://support.catapultcms.com/app?hsLang=en#app-management) - [What's New](https://support.catapultcms.com/whats-new?hsLang=en#main-content) - [What's new at CatapultCMS](https://support.catapultcms.com/whats-new?hsLang=en#whats-new-at-catapultcms) - [Contact Us](https://support.catapultcms.com/contact-us?hsLang=en) - [Incident Report](https://support.catapultcms.com/incident-report?hsLang=en) - [Implementation](https://support.catapultcms.com/implementation?hsLang=en#main-content) - [Professional Add-On Services](https://support.catapultcms.com/implementation?hsLang=en#professional-add-on-services) [![catapult-cms-logotype](https://support.catapultcms.com/hs-fs/hubfs/catapult-cms-logotype.png?width=250&height=49&name=catapult-cms-logotype.png "catapult-cms-logotype")](https://catapultcms.com/) [CatapultCMS.com](https://catapultcms.com/) [CMS Login](https://www.catapultcms.com/Login.aspx) [CONNECT Login](https://www.catapult-connect.com/Account/Login?ReturnUrl=%2F) Copyright © 2026, CatapultCMS