---
title: "How to Create a Side Mega Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-side-mega-menu-in-elementor/
date: 2023-10-27
modified: 2026-08-31
lang: en
author: "Aditya Sharma"
description: "A side mega menu displays a large vertical navigation panel down the side of the page instead of across the top, giving you room for far more links, categories, or..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Side-Mega-Menu-in-Elementor_-1024x536.jpg
word_count: 1186
---

# How to Create a Side Mega Menu in Elementor?

## 

- The Navigation Menu widget in The Plus Addons for Elementor turns on Vertical Side Menu in the Layout tab, stacking items vertically instead of in a row.
- A top-level item set to Sub Menu Type: Mega Menu opens a large multi-column dropdown from the side, with Open Direction sending it left or right.
- Vertical Side Title Bar adds a labeled toggle bar with Normal, Hover, or Click behavior, plus Title, Title Link, Prefix Icon, and Postfix Icon fields.
- The feature fits e-commerce stores with many product categories, documentation or knowledge-base sites, and dashboard-style page templates that need side-panel navigation.

A side mega menu displays a large vertical navigation panel down the side of the page instead of across the top, giving you room for far more links, categories, or product groups than a standard horizontal menu.

Adding a side mega menu is especially useful for content-heavy sites and online stores that need to organize a large number of pages or categories.

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](/docs/navigation-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## 1. What It Does

The Vertical Side Menu direction in the Navigation Menu widget turns your menu into a side-mounted panel, and when combined with a mega menu template on a top-level item, it opens a large multi-column dropdown from the side rather than from a horizontal bar.

## 2. Why It Matters

A horizontal menu runs out of room quickly once a site has many categories or product types. A side mega menu keeps that structure organized and scannable, without cramming dozens of links into a single top bar.

## 3. What You Get

- A Vertical Side Menu direction option separate from Horizontal and Vertical- An Open Direction setting to open the submenu to the left or right of the side panel- A toggleable title bar with its own hover and click behavior- Prefix and Postfix icon slots on the title bar- Full mega menu template support on any top-level menu item

## 4. Benefits

- Fits large catalogs and content libraries into a compact, collapsible panel- Keeps the header clean while still surfacing deep navigation on demand- Reuses the same mega menu templates you would build for a horizontal mega menu, so there is no separate template system to learn

## 5. Capabilities

- **Menu Direction: Vertical Side Menu**, set in the Layout tab, switches the widget into side-panel mode- **Open Direction**, in the Content tab, sends the submenu panel left or right- **Select Menu** assigns the WordPress menu that contains your mega menu item- **Vertical Side Title Bar** switcher shows or hides a labeled toggle bar for the panel- **Title Bar Hover/Click** sets whether the panel opens on Normal display, Hover, or Click- **Title** and **Title Link** fields customize the toggle bar text and its destination link- **Prefix Icon** and **Postfix Icon** sections add icons before or after the title bar text

## 6. How It Works

Selecting Vertical Side Menu as the Menu Direction changes how the widget renders its markup, stacking items vertically instead of in a row. When a menu item at Level 1 is set to Sub Menu Type: Mega Menu with a template assigned, that item's submenu renders the chosen template's content instead of a plain link list. Because the parent menu is already vertical, the mega menu panel opens to the side, in the direction chosen under Open Direction, rather than dropping down.

## 7. How to Use It

To do this, first create the mega menu templates and a menu just like you would for a horizontal mega menu.

Then, add the Navigation Menu widget to the sidebar or a page template and follow the steps:

> *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 

- Select **Default** from the **Menu Type**.- Then select **Vertical Side Menu** from the **Menu Direction** section.- In the **Content** tab, choose the submenu open direction from the **Open Direction** dropdown.- Finally, from the **Select Menu** dropdown, select your mega menu.

You can select the appropriate submenu hover event and effect.

By enabling the **Vertical Side Title Bar** toggle, you can add a toggle bar for the menu.

Setting up the Vertical Side Menu direction and enabling the title bar

Did you know? You can create [menu with Repeater in Elementor.](https://theplusaddons.com/docs/create-a-menu-with-repeater-in-elementor/)

From the **Title Bar Hover/Click** dropdown, you can set the behavior of the toggle menu opening. Here you'll find three options:

- **Normal** - To always show the menu.- **Hover** - To show the menu on hover.- **Click** - To show the menu on click.

From the **Title** field, you can change the toggle bar title.

You can add a link for the toggle bar in the **Title Link** field.

From the **Prefix Icon** and **Postfix Icon** sections, you can change the toggle bar icons.

That's it, now you'll have a beautiful side mega menu.

Demo of the finished side mega menu opening from the vertical side panel

Also, read [how to create a vertical mega menu in Elementor](https://theplusaddons.com/docs/create-a-vertical-mega-menu-in-elementor/).

## 8. Use Cases

- E-commerce stores with many product categories that need a compact catalog panel- Documentation or knowledge-base sites organizing many topics off a side rail- Dashboard-style or app-like page templates where a side panel fits the layout better than a top bar

## 9. Limitations

- The Container Width and alignment controls for a standard dropdown mega menu (Default type) are built for a horizontal layout; when Mega Menu Type is set to Full Width, actual rendered width still depends on the parent section's own width and layout, so full-bleed width is not guaranteed purely from the widget setting.- Mega menu templates are edited through the live editor link inside the repeater item; the template editor depends on Elementor's own template loading and can be slow to open on sites with many templates or heavy page builders installed.- Mobile rendering of a side mega menu uses the widget's separate mobile menu markup, so submenu items that display correctly in the desktop side panel should always be checked again at mobile widths.

## 10. Troubleshooting

The issues below are sourced from real support tickets on this feature (via FluentSupport) and disclosed here as reported by users, not guaranteed to affect every setup.

- **Mega menu template stays stuck on a loading screen when clicking Edit Template (FluentSupport ticket #22044).** This has been reported when the mega menu template editor conflicts with page-load timing on the site. Try opening the template directly from Templates in the WordPress admin instead of the live editor link, then reassign it in the widget's Template dropdown.- **Mega menu set to Full Width does not resize to the browser window and loses center alignment (FluentSupport tickets #22264 and #21488).** Full Width and Container width settings render relative to the section the widget sits in. Check that the wrapping section or container itself is set to full width or stretch, since the widget cannot force a parent container wider than its own configured width.- **Mega menu dropdown stays limited to the parent container's width even with a wide Container Width value set (FluentSupport ticket #21196).** This has been reported as CSS specificity from theme or other plugin styles overriding the widget's width selectors. Try increasing the Container Width value under Mega Menu Type: Default, and confirm no theme-level max-width rule is scoped to the header area.- **Submenu items appear correctly in the Elementor editor but are missing on the live mobile menu (FluentSupport ticket #21875).** This points to a mobile-specific rendering path; recheck the item's Menu Level (depth) and Sub Menu Type settings, since mobile menu markup is generated separately from desktop and a misconfigured depth can drop nested items on mobile only.