DiviMenus is a powerful third-party menu builder module that makes it easy to build menus with unique user interfaces. The menus work well within the layouts and as navigation in the header. It also includes a popup system that displays Divi layouts from your library. In this Divi plugin highlight, weβll look at DiviMenus to help you decide if itβs the right plugin for your needs.
Installation was straightforward. Upload the plugin in the plugins screen and activate it once itβs finished uploading. No other setup is needed.
A new module is added to the Divi Builder called DiviMenus. Letβs look at its settings.
Content Settings
The Content tab includes a section for submenu items, menu options, menu items, titles, background, and admin label. The default view shows the menu as a circled hamburger icon. The menu items appear around the icon according to the pattern you choose between circular, horizontal, and vertical. Show them opened, inline, with equal heights, and bring them to the front. All of these elements can be styled in the Design tab.
Menu Items
Menu items are the links in the menu and are added as submodules. Adding a menu item displays its icon with a title that appears on hover. You can change the title, icon, hide the menu item, disable the menu item, and add the link. This is the default design. Iβm hovering over the menu item so it shows the title.
The link can be a URL, popup, or show an element. The URL can be any website link you want and you can have it to open in the same window or a new window.
Popup lets you select any Divi layout to use as a popup. It can include any Divi elements you want. It works only as a popup when this menu item is clicked.
Iβve added the first section of the contact page from the ET Realtor layout pack. It opens the layout as a popup thatβs smaller than the screen and includes an overlay and a closing feature that turns the mouse cursor to an x if you hover outside of the layout.
The link can be a URL, popup, or show an element. The URL can be any website link you want and you can have it to open in the same window or a new window. This also allows you to create anchor links.
The Show link type can bind an element of the current page based on the CSS ID. This can be used to reveal hidden content, change the visibility state, show and hide elements, filter elements, recreate processes, etc., all on click.
DiviMenu Shape
Menu items can display in different shapes. This example displays the horizontal shape, which places them on a line to the right of the menu.
The circular shape places them in a circle based on the option you choose. The default places them around the menu.
You can also place them in a semicircle above, below, to the right, or the left of the menu.
Menu Button
The menu button includes options for placement, type, to hide the button, and to disable the button (which keeps it from being clickable). For position, you can set it to the right, left, or center. The button type can be an icon, image, or text. Iβve moved the icon to the right and selected a different icon in the example above.
Image lets you choose any image from your library to use in place of the menu icon. It adds a circle around the image.
Text allows you to enter the text you want to display. Itβs also placed within a circle.
Menu Items
Menu Items can also be displayed as icons, images, or text, and you can disable them. This gives you control over them as a group rather than individually.
By selecting to show an image, each menu itemβs module now has Image as the option rather than Icon. This allows you to add an image for each submenu independently.
The same goes for text. Iβve selected Text in the Menu Items options and now Text is the option in each of the submenus. The menu items grow to accommodate the text.
Titles
Titles give you control over the title that you give each submenu item. You can show or hide them, have them to display on hover or always display, make them clickable, and hide them on phones. Iβve selected to always show them and make them clickable.
Display Settings
Display Settings include options for the button, icon, menu items, text, titles, and alignment. Letβs take a closer look.
Menu Button
Menu Button gives you control over the background and border of the button. Change the colors, show the border, adjust the border radius and size, and enable the resizing effect. Resizing scales the button down when the menu is opened. In this example, Iβve changed the background color, added a border, adjusted the radius, and adjusted the border width.
The Menu Button Icon adjusts the icon color, font size, and lets you display it in bold. Iβve adjusted all three settings in this example.
Display Menu Items
Menu Items adjust the background color, border radius, border color, and border size. Iβve adjusted each setting in this example.
Menu Items Text
Menu Items Text lets you choose the font, make it bold and italic, choose the text color, and set the text size. Iβve adjusted each of these settings.
Menu Items Title
Menu Items Title adds options for the title position (choose from top, right, bottom, and left), background color, background padding, and lots of font adjustments. Iβve moved the titles to the top, adjusted the font size, added padding, and added a background color.
DiviMenu Alignment
The alignment options adjust the alignment within the row. Iβve centered the menu in this example.
The submenu items also include Content and Display settings, but theyβre limited to the types of menu settings youβve chosen in the main settings. The Content tab includes settings for the menu item, icon, title, spacing, box shadow, and transform. Iβve adjusted the colors for the background, border, and font, changed the font size, and added a box shadow. Iβve also moved the title to the bottom.
There are lots of free layouts for DiviMenus to help you get started. Theyβre available from the publisherβs website using the link in the DonDivi dashboard menu. Youβll need to download and unzip them. Several include headers and popups. The layout is uploaded to the page itself, the header is added in the Theme Builder, and the popup is uploaded to the library.
For our examples, letβs look at a few of the free layouts and see how well they work with the Divi Builder and the Divi Theme Builder.
The Coffee layout comes with two sections and popups. This example shows the two sections added to the ET Coffee layout packβs landing page. Both display their menus closed.
Clicking on the first menu opens it with a semicircle-right layout. Each of the menu items includes images and non-clickable titles.
Clicking one of the menu items opens the popup for that item. It includes a button so the customer can make a purchase. This popup was already linked to the popup in the library, so I didnβt have to add this myself.
The second section adds two modules that work independently. Iβve clicked on the first module to open its menu.
The popups work the same as the first section.
The Megamenu layout includes a layout, header, and popup. Iβm only looking at the header. Iβve uploaded the header layout to the Theme Builder. There is a lot here that can be customized for my purposes including four DiviMenus modules, code, and lots of blurbs and text.
My test site now displays the global header. This is the closed position.
Hereβs the megamenu opened. Each of the elements includes hover effects. Iβm hovering over Service 2 in the example above. Itβs difficult to tell in this image but it does have a shadow effect at the bottom of the menu.
Extra Tools and Help Center
A new menu item is added to the dashboard called DonDivi. Clicking this opens a screen where you can enable several extra tools and see links to the help center including documentation, support, and the free DonDivi layouts.
Visual Builder quick-link lets you go straight to the Divi Builder from your lists of pages, posts, and layouts. Rather than launching the WordPress editor and then having to select the Divi Builder, this automatically opens the page or post with the Divi Builder.
Layouts Shortcodes lets you place sections, rows, and modules within any Divi module that can take a shortcode. It adds the shortcode to each layout on the list, so all you have to do is copy it and paste it where you want it to appear.
DiviMenus is available in the Divi Marketplace. It costs $49 and includes unlimited website usage and one year of support and updates.
There are also several expansions available that add new features to DiviMenus.
- DiviMenus On Media lets you place custom icons, images, or text on media such as images and videos.
- Floating DiviMenus allows your DiviMenus to float on the page, so they remain in place with the user scrolls. You can hide, replace, or relocate it on single pages.
- DiviMensus Sharing adds a share option that lets you create social media sharing menus using DiviMenus.
Ending Thoughts
Thatβs our look at the DiviMenus plugin for the Divi Builder. Itβs not difficult to use and it can build some interesting menus. I especially like that itβs not just for headers. It doesnβt just feel like a menu module. It feels more link a UI module that can make menus and a lot more.
Some of the elements are limited. For example, even though the menu items use icons, images, and text, you canβt use a mix of them. You can only choose one type. Also, popups can only be tied to the menu items.
Even with these minor limitations, Iβm impressed with the kind of menus that can be made with this module. If youβre interested in creating unique menus for Divi, I recommend giving DiviMenus a look.
We want to hear from you. Have you tried DiviMenus? Let us know what you think about it in the comments.
Featured Image via MKdesigner / shutterstock.com
π T H A N K Β· Y O U π
Really proud to read this great review of our DiviMenus plugin on ET Blog. Thanks Randy!. More stunning features coming soon! π₯³
+1 β€οΈπ
Although it looks pretty, I really wish some of these mega menu/ Divi menu plugin authors considered accessibility as a priority or even a consideration. While almost every country has some sort of accessibility guidelines, none of these developers seem to give a single thought to accessibility. Navigation is pretty important.
In Canada we have AODA, which stipulates heavy fines for websites that are not WCAG 2.0 compliant as of January 2021. Divi’s menu isn’t currently 100% compliant as it is, I can’t even consider adding something that decreases accessibility even further.
Hi Mike,
There is a Divi Plugin called Divi Accessibility in the WordPress repo that takes care of some of the issues https://wordpress.org/plugins/accessible-divi/
I have used Divi Plugins and Themes for a long time now. And I must say the plugins and the tools and even the demos are satisfactory.
Thanks for sharing a review.
The coffee menu is adorable!
For everyday use I tried a lot of Divi Menu plugins so far and all had their weaknesses.
I wish Divi would come with some more menu options itself. Especially the mobile menus!
Thank you Judith! Divi is better and more powerful every day, and surely very soon it will amaze us again with what you say and we all hope too! π₯³ Meanwhile from DonDivi we create tools that make waiting easier! π
WOW… $63.75 and that is yearly ROFLMAO…. all in with addon’s because everything that is shown here is not everything you get unless you buy the DiviMenus and a few additional addons… for a little menu tool…. if that doesn’t make you learn to code not sure what well…
Hi Noah, I’m afraid you’re wrong… DiviMenus costs $49 (even cheaper by taking advantage of the current Cyber Monday offer) and includes unlimited website usage, 1 year of support, updates, and premium layouts. Everything shown in this post is made only by using the DiviMenus module, without any other additional add-ons, although of course you can get even more amazing functionalities by expanding DiviMenus as Randy explains at the end of the post … But you are right, after all DiviMenus is just a tool to make work easier for many web designers, and end customers, since they can edit all this from just 1 module in the Visual Builder…, and you simply prefer to do all this with code instead. Great, isn’t it?
This looks so cool! I will definately give this a closer look. It looks like, this plugin can give a webdesign a completely different look.
Thank you Anders! π Happy building!