Essential Blocks Mega Menu allows you to design expandable navigation menus with multi-dimensional dropdown layouts, offering visitors an engaging browsing experience. With its multi-column layout and visual organization, this premium block helps to show a website’s overall navigational options at a glance and improve user experience.
Follow this step-by-step guide to design a multi-column expandable menu for your website using the Essential Blocks Mega Menu block in Gutenberg.
How To Activate the Mega Menu Block? #
To activate the Mega Menu, navigate to Essential Blocks → ‘Blocks’. Then, toggle to enable the block as shown below. After that, click on the ‘Save’ button.
Note: Mega Menu is a premium block. You will need to install and activate Essential Blocks PRO on your website with the free version.
How To Add A Mega Menu Block in Gutenberg? #
You can set up the Essential Blocks Mega Menu for a single page or blog. If you want to set up the menu for the entire website, you first have to navigate to the Appearance → ‘Themes’. Then navigate to the ‘Patterns’ and then go to the ‘Header’. There, you can configure the Mega Menu for your website.
Then, from the Header menu, search for the ‘Mega Menu’ block and insert it into the header section. After you have inserted the block, you will get two options: ‘Choose’ or ‘Start blank’. Select ‘Start Blank‘ if you want to create the Mega Menu according to your preferences.
If you click on ‘Choose’, you will find premade templates for the mega menu. There, you will have the option to choose from three different layouts. Those three different layouts are:
Minimal Layout: In this layout, menus expand into a mega menu showcasing multi-column options in a clean, organized style. You will also be able to add a website logo and a promo banner placeholder and highlight new features on your website.
Modern Layout: This multi-column layout combines simple menus with category-based mega menus, allowing you to showcase features by category and enhance them with your preferred icons and website logo.
Elegant Layout: With this layout, you can create a multi-column design to showcase different services while also displaying the website logo, contact details and providing multiple ways for visitors to connect with you, including social media icons.
How To Configure the Mega Menu in Gutenberg? #
If you want to design a Mega Menu according to your preferences, follow these step-by-step guidelines. Using Essential Blocks, you will get the utmost flexibility in designing a menu, giving a hover effect, adding icons, badges, images and the list goes on.
Add Menu Items In Navigation Bar #
After selecting the ‘Start Blank’ option, you will find the default menu options. There, you can add different menu items based on your website. From the right bar, you can add different menu items and their links. You can either paste the URL directly into the URL field or use the dynamic field icon to select the desired source and field for adding the link.
Customize The Menu Items #
Now, once you have finalized all the items for the menu bar, you can customize each item. From the right sidebar, you can toggle different options. Here, versatile toggle options are available:
- Open in New Tab: If you enable this option, then the menu item will open in a new tab of your browser.
- Add Nofollow: Enable this option if you want to prevent search engines from crawling this page. It will not appear in search engines then.
- Show Description: By enabling this option, you can add a specific description for the item on your menu.
- Show Icon: To add an icon for the specific menu item, you can enable this and choose a different icon.
- Show Badge: If you added a new landing page, item or feature, then you can enable the badge to show what is new on your website.
- Has Dropdown: If you want to navigate and show the expanded version of your menu item, then enable this option and add sub-items in the menu.
Dropdown Menu Layout Design #
To show different menu options within a menu, you have to first enable the ‘Has Dropdown’ option. From there, you will find two types: One is showing pages in a simple dropdown; another is showing through another mega menu item.
After selecting the ‘Mega Menu’ type, you will find the option to add ‘Mega Menu Layout’. There, you can select the number of column layouts based on the number of pages or features you want to show.
In this layout, you can add any Gutenberg block the design demands or show different features, product categories, content highlights and many more options of your website.
Styling Mega Menu #
Under the ‘Styles’, you can customize your Menu Item, Dropdown & Hamburger Styles. You can easily customize your Background Border & Shadow under the Mega Menu.
You can also set your icon position, color, padding, and much more without coding. The same applies to Icon, Badge, and Indicator, where you can add typography, color, hover color, and more.
Advanced #
From the ‘Advanced’ tab, you can easily customize the Responsive Control, Animation, and Custom CSS for more advanced styling and customization options.
Final Outcome #
By following the basic steps and a bit more modification, you can style your EB Mega Menu however you want.
Getting stuck? Feel free to contact our support for further assistance.
