Mega Menu
NavigationPowerful, flexible multi-level navigation system.
Menus With Wow
Create stunning, professional navigation menus in Concrete CMS without touching a line of code. Mega Menu combines powerful features with an intuitive interface, letting you build everything from simple dropdowns to complex mega menus that work beautifully on both desktop and mobile. Whether you're a content editor who wants point-and-click simplicity or a developer who needs precise control over styling, Mega Menu has you covered.
No coding required
Build beautiful menus instantly with our intuitive point-and-click editor.
Mobile-friendly
Perfect navigation on every device, automatically.
Fast loading
Lean code & caching tools reduce page load time by up to 70%.
SEO optimized
Well-structured code that helps your site rank higher.
Slick animations
Smooth, natural transitions that feel professional.
12+ included skins
Ready-to-use designs that match any website.
Flexible layouts
Shape your menu exactly how you want it.
Advanced styling control
Perfect your design with custom CSS.
Documentation
Live Demo
The c5extras.com main navigation at the top of the page uses the Mega Menu package (with a customized skin).
Basic menu with simple drop-downs, "twist & shrink" animation, "White Ice" skin:
Basic menu with logo on right, no icons, drop-down search tool, "ease up" animation, "In Focus" skin, "Lato" Google Font:
More complex menu with Extended Menu (on "Home" drop-down), activate on click, outer padding, centered alignment, Info bar with social icons and search tool, "scale" animation, "Sharp Business" skin, "Nunito" Google Font:
This is just the tip of the iceberg! See screenshots of included Modern skins, and watch the Overview Video below for more examples of complex Extended Menus.
Features
- Lightning-Fast: Up to 70% faster page loading thanks to intelligent caching and optimized code structure. Smart caching adapts to both guest and logged-in users while maintaining personalized content.
- Beautiful Design: Includes 12+ professionally designed skins with foolproof color customization. Each modern skin is carefully crafted for optimal contrast and readability, with built-in dark mode support.
- Complete Customization: Over a dozen style properties can be adjusted without touching code, from padding to typography. Integrate custom page icons, choose from 1,700+ Google Fonts, and select from multiple layout options, including centered logo positioning.
- Mobile-First: Automatically adapts to any screen size with options for both responsive collapse and hamburger menu styles. Drop-down sizing and column width intelligently adjust based on available screen space.
- Rich Content Layouts: Create dynamic drop-downs combining up to 6 different content Stacks per menu. Mix dynamic navigation links with images, formatted text blocks, and other content types for unlimited layout possibilities.
- Pixel Perfection: Every detail has been meticulously crafted for flawless precision, from buttery-smooth hardware-optimized animations to 7 unique drop-down effects. Subtle design elements, like menu tails, offer intuitive visual cues to add a professional polish.
- Search Engine Friendly: Generates clean, semantic HTML code with optimized content-to-code ratio. Eliminates layout shift issues, speeds up browser rendering, and improves other Core Web Vitals metrics.
- Global Language Support: Full support for right-to-left languages and seamless integration with Concrete CMS's multilingual features. Create separate menus for each language while maintaining consistent styling and functionality.
- Member Integration: Easily create personalized navigation experiences for logged-in users. Integrate member login, registration, profiles, and private messaging while maintaining fast page loads through smart caching.
- Smart Search: Seamless integration with Concrete CMS's core search functionality. Choose between sleek inline search or space-saving dropdown options that match your menu's design.
- Beyond Navigation: Enhance your menu by adding a logo image (or text), a custom-formatted slogan, and a secondary “Info Bar” for contact details, social links, and more. Add eye-catching Call To Action buttons to boost engagement while maintaining design harmony.
- Full Accessibility & Inclusivity: Built from the ground up to strive for WCAG 2.2 compliance, featuring robust keyboard navigation, screen reader support, and carefully considered contrast ratios. Includes optional keyboard shortcut tool and respects reduced-motion preferences.
- Superior Content Management: Leverage Concrete's Stack feature for easier content management and version control. Perfect for teams managing complex navigation structures with multiple content contributors at different permission levels.
- Extend Further: 28 bundled Page List block templates and 2 bonus custom blocks (called Manual Page List and Manual Panel Nav List) can create complex navigation structures with point-and-click ease.
- Designer Control: Gives designers pixel-perfect control through CSS variables and modern styling techniques. Create custom animations, layouts, and visual effects while maintaining accessibility, performance and forward compatibility.
- Developer Friendly: Offers multiple paths for customization, from simple color adjustments to complete custom skins. Developers can extend functionality through highly-organized standards-compliant code.
- Comprehensive Guide: In-depth online documentation covers everything from basic setup to advanced optimization. Clear explanations with screenshots and videos help all users make the most of Mega Menu, whether you're a site owner or developer.
Overview Video
View 8 more detailed videos explaining how to use Mega Menu in the User Guide.
Beginner Tips
- Mega Menu is packed with many features. The user-friendly interface is designed to get you up and running quickly. But to tap into its full potential, you need a little more understanding. Read the comprehensive online User Guide (especially the first two sections).
- Every field in the editor interface includes a question mark circle icon. Hover your mouse over it to display a short description and recommended default value.
- Refer to the Help tab in the editor interface. It has a lot of practical tips to get started with Mega Menu, as well as direct links to relevant pages in your Dashboard.
- If there is insufficient space for all your top-level navigation links, you can hide the “Home” link. From the Nav Menu tab, check the Hide Home Link checkbox.
- To hide specific pages from your menu, set the Exclude from Nav Page Attribute in the Dashboard > Sitemap. Set the Hide Children from Mega Menu attribute to hide child pages. See full documentation.
- The Mega Menu will use the full width offered by the editable area in your active theme. If your menu is too wide, open the editor interface and navigate to the Advanced tab, and under Layout enable Restrict Overall Menu Width. This section also offers controls for the gap around the outside of the Mega Menu.
Advanced Tips
-
Advanced Mega Menu caching features are disabled by default. This ensures you see accurate content while building your site and making frequent changes. When you’re ready to “go live”, enable all caching options on the Mega Menu Dashboard page /dashboard/jb_megamenu/settings. See more caching documentation.
-
After you have completed adding all the content to your website, enable full-page caching in the Dashboard (selecting If blocks on the particular page allow it). This will help to significantly speed up page loading times.
Installation
The Mega Menu package installation process also creates the following:
- Dashboard page: Mega Menu / Settings /dashboard/jb_megamenu/settings
- Custom page attributes
- Core page attributes (if they don’t exist yet)
- Custom block templates (Content, Express Entry, Image, Page List, Search)
- Custom blocks: Manual Page List, Manual Panel Nav List
FAQs
Yes! As long as your theme is built with the basic best practices for Concrete CMS, you should be perfectly fine. If there are any problems at all during installation, just open a support ticket, and we’ll help you out.
Yes, we offer custom web development services and can create a unique skin to match your overall theme design. You can trust us to know Mega Menu better than anyone else. Find out more or contact us for a quote.
Yes, the package can be upgraded as usual, however there are many, many new features in version 3.0. The menu's HTML structure and included styling have changed a lot so old custom skins will probably not work perfectly. So, it’s best to start with a clean slate and add a new Mega Menu block to your site so all the fields will be set to the recommended default values.
Short answer, no. Most of the code is V8 compatible, however there are small yet significant under-the-hood changes in V9 that affect key features of Mega Menu. Since Concrete 8.x was officially at the end of life in late 2022, we set the minimum supported version as 9.0. This also means we can invest more time improving the add-on and adding new features, rather than testing and solving issues on outdated versions of Concrete.
We recommend at least PHP 8.0, but 8.3+ is preferred. See Concrete system requirements.