--- title: "How to Create a Mega Menu in Elementor?" url: https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/ date: 2023-10-27 modified: 2026-08-05 lang: en author: "Aditya Sharma" description: "If you have a large website with many pages or an e-commerce site, a mega menu gives visitors a structured overview of all your navigation options in one view. A..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Mega-Menu-in-Elementor_-1024x536.jpg word_count: 789 --- # How to Create a Mega Menu in Elementor? ## - The Navigation Menu widget in The Plus Addons for Elementor creates a mega menu in Elementor without a separate plugin. - The Plus Mega Menu option appears in the Dashboard after the Navigation Menu widget is enabled, and each top-level menu item uses an Elementor template built with Edit with Elementor. - WordPress menu setup uses Appearance > Menus, Screen Options, and the Plus Mega Menu tab to add templates, then a Custom Links parent item keeps mega menu items closed by default. - Mega menu Type offers Default, Container, and Full Width, and Full Width spans the entire viewport for cases like a WooCommerce store navigation. If you have a large website with many pages or an e-commerce site, a mega menu gives visitors a structured overview of all your navigation options in one view. A mega menu is a drop-down panel that displays multiple links, submenus, and visual elements in a multi-column layout. The Navigation Menu widget in [The Plus Addons for Elementor](https://theplusaddons.com/) lets you create a mega menu in Elementor without a separate plugin. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).* **Best Used For:** - Large e-commerce sites with product categories and subcategories in the navigation- Agency or service websites with multi-level service hierarchies- SaaS platforms with feature-rich navigation across multiple product areas ***Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed and 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) ### Create Elementor Templates for Mega Menu To create the mega menu using the Navigation Menu widget, create an Elementor template for each top-level menu item. After you enable the Navigation Menu widget, the Plus Mega Menu option will appear in the Dashboard. To create a mega menu item, follow the steps - 1. Go to **Plus Mega Menu** > **Add New**. 2. Add a name to the template and click **Publish**. 3. Click the **Edit with Elementor** button, build the menu content using Elementor widgets, and click **Update** to save. ![Plus Mega Menu Add New in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/10/plus-mega-menu-add-new.png) Also read [5 best Elementor mega menu plugins.](https://theplusaddons.com/blog/best-elementor-mega-menu-plugins/) Repeat this process for all the top-level menu items you want in your mega menu. #### Elementor Editor Error Some users may see an error in the Elementor editor when opening the menu item. ![Elementor editor error when creating a mega menu in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/10/elementor-editor-error.png) If you see this error, click **Go Back**. Go to **Settings** > **Permalinks** and reset the permalinks. To do this, select **Plain** from the **Permalink structure** options and click **Save Changes**. Then select your previous permalink option again and click **Save Changes**. Your permalink is now reset. Open the Plus Mega Menu item in Elementor to continue editing. ### Create the Menu After creating all the mega menu templates, create a WordPress menu to assemble them. 1. Go to **Appearance** > **Menus**. 2. Click the **create a new menu** link, add a name, and click **Create Menu**. 3. Click **Screen Options** at the top and check the **Plus Mega Menu** option. All the templates you created will appear under the **Plus Mega Menu** tab. 4. Select the items you want to add to the menu and click **Add to Menu**. 5. Add a parent item for each mega menu item using the **Custom Links** option. This keeps the mega menu items closed by default. > *Note: You can also [make the mega menu fullwidth](https://theplusaddons.com/docs//create-a-fullwidth-mega-menu-in-elementor/) by selecting Full Width from the Mega menu Type dropdown in the parent menu item.* Did you know? You can [create a sticky menu in Elementor.](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/) Drag and drop to place the mega menu items under their corresponding custom link parent items. Open any custom link menu item to access additional mega menu options. Make these adjustments on custom link items only, as the settings affect all child mega menu items beneath them. **Label Color** – Set a color for the text label on this menu item. Use this to distinguish promotional items like “Sale” or “New” from regular navigation entries. **Label Bg Color** – Set a background color behind the label text. Use this to make a specific menu item stand out visually. **Icon Type** – Add an icon or image next to the menu item label. This helps visitors identify a category at a glance. **Mega menu Type** – Set the container width for the dropdown panel of this menu item. Options are Default, Container, and Full Width. Use Full Width when you want the dropdown to span the entire viewport, such as on a WooCommerce store navigation. With **Default** width selected, additional options appear to set a custom pixel width and content alignment for the dropdown panel. 5. Click **Save Menu** to save the menu. ### Add the Menu To do this, add the Navigation Menu widget to the header template and follow the steps - > *Note: To create the header 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.*  1. Select **Default** from the **Menu Type** dropdown. 2. Select an appropriate option from the **Menu Direction** section. Select **Horizontal Menu** for a standard top navigation bar. 3. From the **Select Menu** dropdown in the **Content** tab, select your mega menu. From the widget settings, select the appropriate submenu hover event and effect. The mega menu is now set up and ready to use on your site. Also, read [how to create a side mega menu in Elementor](https://theplusaddons.com/docs/create-a-side-mega-menu-in-elementor/).