How to build a mega menu in Joomla 3.x
The menu plays an important part in any website, helping visitors to navigate to anywhere that they want to get to.
A functional and navigable menu promises higher user engagement and conversion rates.
However, the Joomla default system hasn't integrated the function to create a large-sized menu - a mega menu. Therefore, you will need support from 3rd parties to create your own mega menu.
This article will introduce two easy ways to create a mega menu for your Joomla sites, regardless of whether you are beginners or experienced developers.
Table of Contents
How to create a Joomla mega menu
Using Sun framework - Joomla templates
Creating a mega menu on JSN templates
Using Joomla mega menu extensions
What is a mega menu?
A mega menu is a drop-down menu that includes different types of media such as images, videos or links and can be displayed in multiple rows or columns.
A mega menu will allow webmasters to show more items and information than the default Joomla menu. Therefore, it is particularly helpful for large websites such as e-commerce sites with many forms of content.
There are many famous brands in the world that prefer using the mega menu for their website rather than a simple menu. Here are some examples:
How to create a Joomla mega menu
Using Sun framework - Joomla templates
Mega Menu Builder features
Sun Framework is a modern and innovative Joomla template framework that has been created by the JoomlaShine team and is used as the foundation of all JoomlaShine templates.
Understanding the critical role of the mega menu and its flexibilities, all of using the Sun framework have integrated a mega menu builder function.
With this function, Joomla users can easily create a flexible and informative mega menu without any coding knowledge.
Here are some highlight features of the Mega Menu Builder from Sun framework:
- Easy to use: Similarity with Layout Manager in JSN Sun Framework, you can easily build a mega menu with drag & drop
- Easy to customize: Your mega menu will be customized easily through some simple clicks with WYSIWYG editor.
- Multi-column layout support: With all templates based on Bootstrap 3, you can create up to 12 columns in the Mega Menu Builder
- Unlimited content type support: Various types of content including text, images, videos, module, and more, will be able to be displayed in the mega menu from Sun framework.
- Mobile-friendly: The mega menu from Sun Framework is responsive to any kind of mobile device.
Creating a mega menu on JSN templates
First of all, you will need to install and activate JoomlaShine templates on your Joomla site.
Upon activation, you can go to Templates Style Editing to create a mega menu.
Step 1: Go to Extensions -> Templates -> Click on the Selected Template 
Step 2: Open the Mega Menu tab -> Select Menu -> Select Menu Item
Step 3: Drag & drop elements to the mega menu
With all JSN templates, it is easy to drag and drop the elements on the left column to the control panel.
There are five elements which you can add to customize the mega menu:
- Image: insert an image from your library in megamenu
- Sub-menu: insert a sub-menu with the selected parental menu
- Module: insert any Joomla menu in mage menu
- Module position: insert all modules from the selected position
- Custom HTML: insert a custom HTML
Step 4: Configure the settings for each element and the mega menu container.
The WYSIWYG editor allows users to select and configure each element as well as the mega menu container in the control panel on the right. 
Mega menu examples
Mega Menu with image
View demo: JSN Shine- Pillow niche - Outfit Menu
Images are commonly used in the mega menus of many e-commerce websites, especially for fashions websites, as they are eye-catching and impress users.
Here is the layout of this mega menu:
How to build
This quick tutorial will show you how to create a simple mega menu with a module and image by using Sun Framework:
Step 1: Create the mega menu layout
Open a template from Joomlashine -> Mega menu tab, then customize the mega menu layout by drag & drop elements from the left column to the control panel. 
Step 2: Configure each mega menu element
From the main control panel, you can configure each of the following levels:
Element -> Column -> Row -> Container
Once you select the level setting, you can change the settings for this on the right-hand column:
Similarity, you can set up the image element by selecting an image from the media folder.
Step 3: Save the mega menu.
When you finish, don't forget to save the mega menu and then back to the front-end to see your result: 
Multi-columns with sub-menu
View demo: JSN Attorney - Joomla! Menu
How to build
Using multi-module: creating the layout for this mega menu by dragging & dropping four modules like in the following picture:
Advanced layout with different types of content
View demo: JSN Bakery- Pages Menu
How to build
Option 1
Using JSN templates: you can easily drag & drop different elements to build the layout as below:
Option 2
Using JSN Page Builder 3 - this extension allows you to create the mega menu as above with only one module.
Step 1: Download and install Page Builder3 on Joomla site
Step 2: Go to Extensions -> Modules -> New to create a new module
Step 3: Create a new module using Page Builder3
Once you open the ‘New Module’ screen, you will be able to create a new module with JSN PageBuilder3 by following:
Easily drag & drop elements from the left sidebar to the main screen:
For this megamenu example, you can use our pre-built layout with 4 columns and then add image and text elements:
Select each element and change the settings on configuration bar on the right:
Step 4: Present your mega menu in JSN template
Go to Mega Menu tab in your JSN template, then select the menu item.
To present the new module, you will need to drag & drop a module element to the main screen: 
Then, you can configure the module with the right bar.
With JSN PageBuilder 3, you can create any type of mega menu you want.
Using Joomla mega menu extensions
On the other hand, if you consider using extensions to create the mega menu for Joomla websites, you can take a look at these following extensions:
1. DJ- Megamenu
Dj-Megamenu is a smart solution that gives Joomla users the ability to design an advanced mega menu with a diverse range of content. The extension is highly configured and it comes with many handy features.
DJ Megamenu offers Joomla users with both free and paid versions. Depending on your needs, you can decide to pay for this extension or use the free option.
For this part, we will show you how to create a simple Mega menu with DJ- Megamenu free version.
Step 1: Download DJ- Megamenu
Step 2: Install the extension
After installing, go to Extensions -> Modules to activate it.
Step 3: Open DJ- MegaMenu module and configure it
Go to Extensions -> Modules -> New -> Select DJ- MegaMenu
You can see more advanced settings in the Mega Menu Options tab or Mobile Menu Options tab:
Here is the mega menu example in the front-end using Dj- Megamenu extension:
DJ- Megamenu might be a little difficult for Joomla users to use for first-time because it does not come with any guidelines. Moreover, there are quite a lot of limitations in the free edition.
You will able to use these below features if you pay for the professional edition:
Features:
- Custom themes and continuous updates
- Change default values of the following options for each menu item: column width in pixels, submenu type and dropdown direction
- Sticky menu option
- Responsive and mobile-optimized
- Allows adding Joomla modules in mega menu
- Compatible with all mobile devices with dedicated mobile themes
2. JUX Mega Menu
JUX Mega Menu is a drop-down menu module which allows you to display a ton of content in menu items including text, images, module and even modules. This is one of the most complete and responsive extensions for the Joomla mega menu.
Jux Mega Menu is a paid extension with three different packages: Single, Megamenu Membership and Basic membership.
Features:
- Multiple layouts & colours to match custom themes.
- Flexible configuration to present menu:
+ Submenu opening direction: Up or Down
+ Submenu opening control by mouse: Click or Hover
+ Auto-align menu: Left, Right or Center.
- Works perfectly with mobile browsers on the iPhone & iPod, iPad, and Android.
- Support all popular web browsers: IE9+, Firefox 2+, Safari 3+, Chrome 8+, Opera 9+ and more.
- Supports creating a custom layout with customization guidelines.
- Customizable animation with effects: Sliding, fading, zooming, elastic adjustable, speed control, delay time.
- Fully controllable in the backend.
3. SJ- Megamenu
SJ- Megamenu is a super flexible mega menu module which is highly customizable to build any custom type of menu.
With a basic plan from $10, you will able to use a lot of features from SJ- Megamenu which are not only useful but also very easy to set up. 
Features:
- User- friendly interface with drag and drop supported.
- Supports horizontal & vertical mega menu types with 8 pre-designed layout styles.
- Displays advanced content including HTML, shortcodes, images, banners and more.
- 100% responsive on any screen sizes.
- Easily add images, icons or background images from any available folders; insert image URL or directly upload.
- Various browsers supported, including Chrome, Firefox, Opera, Safari, IE 10+ and more.
Final Thoughts
The mega menu helps to advance Joomla websites by creating a very large menu with varied content from texts to links, images, icons or videos.
Let's try our templates to make your Joomla sites become more informative and attractive to audiences.
