Mega menus are a commonplace design trend on huge WordPress websites. Such websites will have a fancy knowledge structure with many alternative sections and subsections. Through grouping identical hyperlinks in combination, mega menus make it easy for the person to search out related knowledge temporarily.

About mega menus, usability expert Jakob Nielsen says:

“[Mega menus] are a very good design selection for accommodating a lot of choices or for revealing lower-level website online pages at a look.”

On this publish, we’ll check out examples of WordPress websites that the use of mega menus, why they’re value exploring as an choice for those who run a big web page, and plugins that can assist you put into effect mega menus.

WordPress Websites That Use Mega Menus Successfully

Mega menus are discovered on all kinds of websites.

Joanie Clothing

Joanie Clothing Shop All mega menu
Joanie Clothes Store All mega menu

The mega menu pieces at the Joani Clothes web page hyperlink to WooCommerce product classes.

The Stanford Daily

The Stanford Daily Sports mega menu
The Stanford Day by day Sports activities mega menu

The Stanford Day by day information website online makes use of a mega menu to show classes inside of classes, i.e. Sports activities > Fall Sports activities > Box Hockey.


Pousta Singular mega menu
Pousta Singular mega menu

Characteristic photographs also are utilized in Pousta’s mega menu, alongside the website online to spotlight necessary tales.

Georgia State University

Georgia State University Alumni mega menu
Georgia State College Alumni mega menu

The alumni menu pieces at the Georgia State College web page are customized hyperlinks to some other area.

Jamie Oliver

Jamie Oliver Recipes mega menu
Jamie Oliver Recipes mega menu

Probably the most mega of mega menus! Jamie Oliver’s website online features a separate hamburger menu for pill and cellular.

British Rowing

British Rowing Knowledge mega menu
British Rowing Wisdom mega menu

What Options Can WordPress Mega Menus Comprise?

In addition to menu hyperlinks, they are able to have:

  • Segment headings
  • Pictures
  • Icons
  • Descriptions
  • Widgets, which is able to come with photographs or video

Maximum mega menus are proven on hover, hover intent, or click on from horizontal menu bars. Some plugins can do vertical mega menus as smartly.

Hover intent is a jQuery plugin that makes an attempt to intuit the person’s that means of a mouse transfer. So a handy guide a rough drag would possibly not open the menu while a gradual planned transfer over a menu merchandise will.

Mega Menus WordPress Plugins

There are a variety of unfastened and paid plugins that do the task smartly for those who’re bearing in mind including a mega menu in your WordPress website online.

Max Mega Menu (unfastened)

max mega menu header

The Max Mega Menu options come with:

  • Accessibility pleasant: keyboard navigation is supported.
  • Animations for submenu transitions.
  • Choices to cover menu pieces or disable hyperlinks.
  • Top rate model with extra options together with vertical and accordion menus.

Mega Menu Plugin for WordPress – AP Mega Menu (unfastened)

Mega Menu header

The Mega Menu Plugin options come with:

  • Vertical mega menus.
  • Create menus by way of drag and drop.
  • Solution to cover menus on cellular.
  • Fade or slide transitions.
  • Top rate model to be had with extra options e.g extra icons and upload your personal icons.


UberMenu header.
UberMenu options come with:

  • Tabbed submenus.
  • Dynamically generated menus.
  • Cellular and pill pleasant menus.
  • Menu animations.

Mega Primary Menu

mega main menu header

Mega Main Menu options come with:

  • 1600+ icons.
  • WPML appropriate.
  • Upload different menu pieces (emblem, seek).

WP Mega Menu Professional

wp mega menu pro

WP Mega Menu Pro options come with:

  • Tabbed mega menu.
  • 14 to be had skins.

Hero Menu

Hero Menu

Hero Menu options come with:

  • WooCommerce enabled.
  • Backgrounds for menus.
  • Sticky menu.

NOO Menu

Noo Menu header

NOO Menu options come with:

  • Clear menus.
  • Save/load presets.

The right way to Create a Mega Menu with Max Mega Menu

Let’s check out how you can create a mega menu. For this case, I created a food-based website online with other recipes the use of the Kale theme.

Step one is to create your menu the use of Look > Menus, ensuring you nest your submenu pieces as it should be.

Mega menus can most effective be created on height point menu pieces, no longer submenu pieces. To get admission to the plugin’s choices for menus, hover over a menu merchandise and make a choice Mega Menu.

So as to add photographs, use an Symbol widget – a brand new function in WordPress 4.8.

A Max Mega Menu image widget
A Max Mega Menu symbol widget

And right here’s what it seems like at the front-end of my take a look at web page:

Max Mega Menu with image on the front end
Max Mega Menu with symbol at the entrance finish

So as to add movies, use WordPress 4.8’s Video widget and upload the video from a URL. On the other hand, upload the embed code of the video to a textual content widget.

Right here’s what it seems like:

Max Mega Menu with video
Max Mega Menu with video

You’ll additionally upload menu icons in the course of the Icon segment within the plugin.

The default Dashicons in Max Mega Menu

So as to add Font Superior, Genericons or customized icons calls for the Professional model, which prices $23 for a unmarried website online.

You’ll make a choice the collection of columns that menus show in and create multi-column layouts grouping pieces in combination.

Max Mega Menu 2 column layout
Max Mega Menu 2 column format

After striking in combination a two-column format, listed here are the consequences at the front-end:

Max Mega Menu 2 column layout for Soups submenu
Max Mega Menu 2 column format for Soups submenu

I used the Recent Posts Widget With Thumbnails plugin so as to add the newest posts. To get them to line up horizontally, I used a widget in a one column format plus some CSS. The one explanation why the pictures don’t line up completely is they’re other heights!

Right here’s the CSS I used to reach this end result:

And some other have a look at how my mega menu is coming alongside at the front-end of my take a look at website online, this time with 3 columns:

Latest posts in a 3 column layout
Newest posts in a 3 column format

Including or converting pieces to your mega menu auto-saves them. Don’t put out of your mind to click on Save Menu as smartly for those who upload new pieces to the menu construction.

The use of Max Mega Menu for Pill and Cellular

On my telephone, I stopped up with two hamburger menus, one from my theme and the only generated by way of Max Mega Menu. The theme menu was once disabled, so it could best possible hidden with CSS.

As there’s no hover state, hover and hover intent occasions paintings as click on occasions, with a faucet opening the submenu.

Best-level menu pieces with mega menus as submenus (e.g. Primary lessons) can’t be accessed on a telephone until the person faucets and holds and chooses Open in new tab.

One option to clear up that is to use another plugin for a mobile only menu.

Max Mega Menu didn’t show the entirety optimally on cellular. I modified down the collection of columns from two to 1 however that had the impact of blending up the content material on my Soups menu, as proven.

Max Mega Menu on Android phone with mixed up columns
Max Mega Menu on Android telephone with blended up columns

The Video widget didn’t display correctly both. There’s an issue with its responsiveness on a small display dimension.

Video widget display cut off on Android phone
Video widget show bring to an end on Android telephone

The right way to Create a Mega Menu with UberMenu

UberMenu offers a lot finer grained keep an eye on over your mega menus. Each and every unmarried menu merchandise may also be custom designed. There could also be a world keep an eye on panel the place some choices may also be set and inherited e.g. default symbol sizes.

There are over 20 built in skins. I selected “Easy Inexperienced.”

The person merchandise controls are:

  • Normal – more than a few settings together with collection of textual content alignment and including CSS elegance or ID.
  • Icon – set an icon to turn with the menu. For the whole vary you want the UberMenu Icons Extension ($8).
  • Symbol – any symbol that can be proven adjoining in your menu merchandise.
  • Format – make a choice the column show and place of any photographs used.
  • Submenu – configure the submenu show.
  • Customized Content material – upload HTML and shortcodes temporarily with out the use of a widget.
  • Widgets – insert widget spaces into menus and make a choice the collection of columns.
  • Customise Taste – make a choice colours and padding for various menu pieces.
  • Responsive – cover or disable the menu at other breakpoints.
  • Deprecated – you’ll be able to safely forget about this in case you are a brand new person.

Cool Issues You Can Do with UberMenu Complicated Pieces

#1. Making a submenu for a Touch web page with a Google Map and a touch shape

I accomplished this by way of the use of the Widget House merchandise set to a two column format. The 2 widgets have been added to a named UberMenu widget space in Look > Widgets.

UberMenu widget with Google map and Contact form
UberMenu widget with Google map and Touch shape

#2. Making a customized two column format

I accomplished this with Column pieces for my Soups submenu.

UberMenu Soups submenu using Columns
UberMenu Soups submenu the use of Columns

#3. Including the remaining 3 weblog posts below “Weblog”

This was once a lot more straightforward than doing the similar in Max Mega Menu as I used to be in a position to make a choice an automated 3 column format. The “Dynamic Posts” merchandise has some complex WP Question integrated. Had I sought after to, I may have filtered by way of class, modified the type order or excluded posts.

UberMenu 3 column Blog with Dynamic Posts
UberMenu 3 column Weblog with Dynamic Posts

#4. The use of a tabbed submenu

Leaving apart the meals theme, I put in WooCommerce and its dummy information.

Right here’s the menu setup for my store, the use of the tabs block.

UberMenu setup for Shop with Tabs
UberMenu setup for store with tabs

I adjusted the collection of dynamic posts for each and every product class to suit the submenu gracefully.

UberMenu shop with tabbed submenu
UberMenu store with tabbed submenu

The use of UberMenu for Pill and Cellular

On my telephone, I discovered that tapping a top-level menu merchandise as soon as opened the submenu whilst tapping it once more opened that web page. It was once recommended that the person may get admission to the top-level menu pieces, although I discovered that exact menu habits rather sudden.

Each and every submenu has a Shut hyperlink on the backside to near it.

My column layouts have been retained for my Soups submenu.

UberMenu Soups submenu on Android phone
UberMenu Soups submenu on Android telephone

On the other hand, I persisted to have issues of the Video widget running in a column format. A Customized Content material merchandise with the embed code for the video labored higher, however was once bring to an end on cellular.

UberMenu with Custom Content embedded video on Android phone
UberMenu with Customized Content material embedded video on Android telephone

The tabbed interface went from horizontal tabs on desktop to vertical tabs on cellular.

UberMenu tabbed submenu on Android phone
UberMenu tabbed submenu on Android telephone

Are Mega Menus for Everybody?

Mega menus are robust and paintings smartly for sure industries corresponding to present affairs, schooling, and ecommerce.

They are able to be a great way to:

  • Spotlight product classes and sale pieces for on-line retail outlets.
  • Make customers mindful of much less obtrusive sections of a website online and give an explanation for their purpose.
  • Display featured photographs for posts or product pictures.

However they’re no longer appropriate for all sorts of website online. When you have a small and easy website online the use of a mega menu can be overkill.

As you’ve noticed, mega menu habits on cellular must be checked sparsely to steer clear of show and interplay issues. Plus huge menus will not be fascinating for cellular units.

There also are potential SEO issues with mega menus – too many hyperlinks can lead to a dilution of “hyperlink juice.”

In any case, mega menus which disappear too temporarily when customers try to have interaction with them are a no-no.

No matter manner you are taking, it’s necessary to plan out your site navigation logically and steer clear of the person having to make too many clicks to succeed in their supposed objective.

You will have to additionally:

  1. Have a visual seek field on each web page.
  2. Listing out kid pages for your top-level pages.
  3. Imagine the use of a sitemap.
WordPress Developers

[ continue ]