By implementing this new menu structure, businesses are effectively able to simplify and optimise the navigation process of their online space – ultimately resulting in increased levels of engagement and user experience.

As you’ll see in our examples, most mega menus will accommodate space for engaging imagery, targeted CTA’s and promotions/offers, making them a much better option than a regular menu structure, especially for websites with a lot of content that requires several category pages. We’ve put together a list of 5 sites that have used mega menus well. Take a look and see what you think, maybe they’ll even inspire you to go mega…

1. Edinburgh Zoo

With their menu, Edinburgh zoo has displayed a good use of subtle background tints to create three standout sections. This is immediately appealing to the user and a prime example of providing a nice, simple user experience.
The site is also well optimised in terms of responsiveness, especially the square logo; which always works well for mobile or tablet devices.
When hovering over the dropdown menu, the rest of the surrounding site is flooded with a darker tint, which prevents distraction and focuses the user on the menu choices.
The incorporation of imagery in the menu makes it all very visually engaging for the user; this is done well through the use of a mixture of both square and circle images, which creates a visual break between the different sections.
CTA’s are also prominently displayed within menu sections and, upon scrolling; the menu remains in a fixed position and reveals a compact version.

Hever Castle

The website of the historic Hever Castle displays a really nice mega menu:

Everything is clearly laid out for the user to view, enabling quick, easy navigation.
The colours used within the menu compliment and offset each other beautifully – the white text, which sits upon a clashing orange or grey backdrop, creates another visual break and an impactful differentiation between the menu sections.
Another thing we liked about this particular mega menu is the neat rollover; upon hovering over each navigation tab, it displays a smart rollover effect with an eye-catching image. Little things like this can make a big difference for user engagement.

The dropdown menu itself is composed of 3 levels of navigation hierarchy, e.g ‘Attractions > Castle > History’, which means the user is only ever one click away from where they need to be. The site shows relevant CTA’s, such as ‘Sign Up’ or ‘Enquire’ under each menu category, which again, makes things a lot easier from the user’s perspective. Again, the application of vivid, high quality imagery adds an authentic feel to the site and really draws the user in.

Etsy

Etsy.com, a retail site who sell pretty much everything, show an effective use of a mega menu:

We picked this one out for their clear, simple, user-friendly menu layout.
There’s also a good use of highlight colours to give the overall menu a nice look and feel.
Like the Hever Castle website, the Etsy menu shows a 3 level navigation hierarchy; which is a highly organised method of displaying a large amount of sub-categories – great for sites that hold a lot of information and content.
When hovering over the primary level, the clever menu structure reveals 2 levels of sub-categories - enabling an incredibly simple navigation pathway.
Another cool feature of the menu is the inclusion of ‘featured articles’, complimented nicely by an image. This just adds something more to the menu and encourages the user to delve further into other areas of the site.

AO.com

Electrical appliance supplier AO stood out for a number of reasons:

First and foremost, the layout is clean and colourful, with easy to follow navigation tabs for the different sections.
Secondly, the use of iconography (the little icons that sit beside each title header), makes the links more visual and universally recognisable.
The dropdown menu is another example of the 3 level navigation hierarchy structure that is now widely adopted by many popular sites.
Furthermore, the dropdown for each tab includes a space in which promotions and featured products can be displayed; enticing the user to take a look. Although promos might feature at the forefront of the site, displaying them within the menu as well will act as an additional reminder and potentially prompt further interest in the deal(s).

It’s all about giving the user a positive, helpful user experience that will ultimately encourage them to not only stay on your site, but to keep them coming back.

Hargreaves Lansdown

Hargreaves Lansdown’s website has a very informative dropdown menu, though this is perhaps slightly overwhelming. Having said this, the description summary under each section is a good idea for these types of businesses. Other things that caught our eye include:

The search bar that is specific to the category selected,
The category links
The inclusion of the latest news feature within the menu.

Our only criticism would be that the menu is very grey and could do with an extra splash of colour, just to make it a little more pleasing to the eye.

It’s all about staying relevant

The advantages of using mega menus are evident, but it’s important to consider what’s going to work best for you and your website. Take the Edinburgh Zoo for example; their menu is littered with pictures of animals, which works well for them, being a zoo. Also, everyone loves animals! AO, on the other hand, have opted to go with icons to represent the variation in the category; and this works well for them too, as let’s be honest, most appliances look the same.

So be smart with it, and don’t always think you have to overcomplicate the structure. As long as you’re improving the customer journey, from capture through to conversion, you’re doing the right thing - so always try to design through their eyes!

Riding the mega wave

Also, with the rise of SEO and the growing need for websites to contain high quality, relevant, search optimised content; many sites are undergoing an information overload. It’s all good and well jam-packing your site full of content, but if the user can’t find it easily, it’s pointless! Mega menus will help eliminate any issue regarding usability, so for most sites, it’s no brainer.

Have you come across any websites recently where you’ve thought “well, that was easy...”? Alternatively, have you landed on any that have been an absolute pain to use? Get it in touch or comment below; we’d love to hear your thoughts!