Create multi-dimensional WordPress mega menus with vertical and horizontal dropdowns. Build beautiful menu layouts in submenu and dropdowns with containers, carousels, tabs & more, and provide a smoother browsing experience with better navigation in WordPress Mega Menu.
Prerequisite: #
To use the breadcrumb block in Gutenberg, you need to have both GutenKit Lite and GutenKit Pro plugins installed on your WordPress site.
- GutenKit (Free Version): Download Plugin
- GutenKit Pro: Get The Plugin
How To Create WordPress Mega Menu in Gutenberg #
⚠️ Mega Menu is a premium extension for the GutenKit Nav Menu block. So you need to have Nav Menu enabled.
Therefore, create a Nav Menu first in your WordPress blocks editor.
💡 Learn How to Create WordPress Nav Menu using GutenKit
Step 1: Add SubMenu #
To add a Mega menu,
- Enable the SubMenu for the Nav Menu.
- Select submenu type to Mega Menu
![](https://wpmet.com/wp-content/uploads/2024/05/enable-submenu.png)
Alternatively, click on the add Mega Menu button in the block toolbar to enable the mega menu as the submenu.
![](https://wpmet.com/wp-content/uploads/2024/05/mega-menu-icon-control.png)
Step 2: Design Mega Menu with any blocks #
You can add any block as the menu item in the mega menu. With the GutenKit Mega Menu block, you can design a menu with images, maps, accordions, forms, pricing tables, or any Gutenberg blocks in the sub-menu.
![](https://wpmet.com/wp-content/uploads/2024/05/add-any-block-mega-menu.png)
Here we have added the Advanced Tab as menu item in the Mega menu.
Step 3: Customize WordPress Mega Menu Styles #
Now you can customize the appearance of the WordPress mega menu using GutenKit. You can tailor menu width and menu position.
Select the Menu width to the following:
- Full Width
- Inline
- Custom
For Custom width, you can adjust the menu width manually.
![](https://wpmet.com/wp-content/uploads/2024/05/menu-width.gif)
Menu Position From: Left or Right
You can set the menu position from left or the right.
Position From: Left
![](https://wpmet.com/wp-content/uploads/2024/05/position-from-left.gif)
Position From: Right
![](https://wpmet.com/wp-content/uploads/2024/05/position-from-right.gif)
Don’t feel like reading? Check out this video tutorial instead! 👇
Like the Mega Menu block, GutenKit comes with tons of advanced features for block editor that bring the page builder features into your website built with Gutenberg.
![](https://wpmet.com/wp-content/uploads/2024/05/gutenkit_cta.gif)