Skip to main content

68 templates now rebuilt for Joomla 5 + VirtueMart 4 on Bootstrap 5. See what changed

A mega menu is a wide drop-down menu that can show several columns of links, images or other modules under one top-level menu item. Shops use it to show many product categories at once without a long, nested list.

About half of our Joomla 5 templates have a mega menu built in, including Hyper Shop, Fashion Shop and Q Store. Your template's page and its documentation say whether it has one.

How to set up the built-in mega menu

The built in Mega Menu is simply a single menu with Modules displaying where you would expect to see the menu drop down. The module positions are tied to the alias of the menu item you would like the module to be associated with. You can add up to 12 modules to each of these custom module positions.

A Mega Menu is not to be confused with a normal Joomla drop down menu where sub-items are nested inside the menu.

We use the Hyper Shop template as the example. Your template's documentation shows the details for your design.

The steps are as below.

  1. Create the initial top level menu
  2. Add it to the correct module position
  3. Create modules to be assigned to each of the top level menu items.
  4. Assign these modules to the relevant custom module positions.

Plan the mega menu

To plan the mega menu you need to decide the main menu headings.

In Hyper Shop it looks like this:

mega-menu.jpeg

Then create the modules (and the menus they show) that will appear under each top-level item.

In this case below, we have 4 modules (of type Menu) under the first heading of Mobile Phones.

Tip: create the menus first, then the modules that show them.

mega-menu-modules.jpeg

menu-position-1-mobile-phones (mobile-phones is the alias of the parent menu item Mobile Phones, shown above.)

mega-menu-module-positions.jpeg

menu-position-2-mobile-phones (mobile-phones is the alias of the parent menu item Mobile Phones, shown above.)

mega-menu-2.jpeg

mena-menu-modules2.jpeg

menu-position-1-watches (watches is the alias of the parent menu item Watches, shown above.)

mena-menu3.jpeg

menu-position-2-watches (watches is the alias of the parent menu item Watches, shown above.) mega_menu-4.jpeg

menu-position-3-watches (watches is the alias of the parent menu item Watches, shown above.)

megamenu-5.jpeg

You can add up to 12 modules to one position. Three positions are available for each top-level menu item:

menu-position-1-MENU_ITEM_ALIAS
menu-position-2-MENU_ITEM_ALIAS
menu-position-3-MENU_ITEM_ALIAS

So, to show modules under the Watches menu item as on our demo, add the watches alias to the position names:

menu-position-1-watches
menu-position-2-watches
menu-position-3-watches

Important: these positions are not in the list of positions in the module settings. In Joomla 5, go to Content → Site Modules, open or create the module, and type the position name into the Position field, like this:

megamenu 6

Applies to our Joomla 5 templates (Joomla 5.4, VirtueMart 4.8). Still stuck? Contact support.