Mega Navigation Menu Design Trends in Modern Websites
We’ve all seen mega navigations and fullscreen dropdowns on-line. They’re frequent throughout the web and particularly helpful on websites with tons of hyperlinks.
But designing a mega nav that works generally is a actual ache. There aren’t any strict tips for these menus so it’s a must to research what others are doing and attempt to make one thing that’ll match along with your mission.
Learn right here: How to Create a CSS3 Mega Drop-Down Menu
Let’s look into some mega navigation developments and see how they take conventional dropdown menus and push them a step additional.
Deep Level Categories
The most precious design model for a mega nav is the column construction.
This allows you to designate “categories” for hyperlinks and create deeper hyperlinks with out utilizing a number of flyout menus. A mega navigation dropdown can span your complete web page so you possibly can often match a minimum of 3-Four columns in one dropdown.
Take a have a look at Wayfair which makes use of a really distinctive kind of dropdown menu. They have a hyperlink for “departments” the place you possibly can browse by class and even sub-category reminiscent of bedrooms > nightstands.
Next to this hyperlink is a dropdown for “room ideas” the place you possibly can browse based mostly on the room. This dropdown options photographs subsequent to the hyperlinks so you’ve a a lot simpler time shopping via selections.
It doesn’t take lengthy to understand they’re breaking navigation objects into classes. These comply with an analogous pattern and Wayfair’s man navigation solely wants two essential hyperlinks for this to work!
Alternatively one other ecommerce store Puma has an analogous columnar construction.
But they break down classes based mostly on demographics and objects, then inside every meganav you discover columns for every merchandise kind(featured merchandise, clothes, sports activities, and so forth).
Notice the columns have their very own headers and these stand out from the remainder of the hyperlinks. It creates a real column construction as a result of you possibly can look via column headers first and browse sub-links from there.
Similar impact on Lucky Brand however with a twist in the design.
All of their columns have the identical colour schemes however they use totally different typography. This could make fast shopping harder however it’s nonetheless simply as usable.
Lucky’s animation results are a pleasant contact as nicely in order that’s positively one thing to think about.
But should you’re combating a mega navigation hierarchy attempt organizing your hyperlinks into deeper classes first.
This pattern isn’t used on each website however I do see it much more these days.
Huge mega navigation menus can span your complete width of the web page to create extra room for desktop & laptop computer customers. Mobile customers usually have hidden menus so that they by no means actually see the total impact anyhow.
The navigation for Pluralsight is a superb instance that includes a fullscreen mega menu. The content material stays mounted on the similar width because the web page itself, however the menu does span everything of the display screen.
It’s a cool impact as a result of it creates extra room in the menu. Or it a minimum of offers the visible phantasm of extra room.
And should you’re operating an enormous navigation for bigger screens why not go the entire means?
Digital Spy has one thing very comparable and their navs embody class breaks too.
There’s a good break up between “normal” dropdown hyperlinks and thumbnail hyperlinks going on to articles.
But once more the content material stays mounted on the similar width because the web page whereas the menu spans everything of the display screen.
Fantastic impact if you will get it working.
You may even mix the column construction and the fullscreen impact into one design.
This is what you see on the OARS website and it’s a stunning instance of nice design + nice UX.
Mixing Images & Text
I encourage including extra photographs to all web sites at any time when potential. Visuals assist to interrupt up all of the textual content we see regularly.
Mega nav menus work greatest on bigger screens so it’s secure to say there’s room for photographs. The Sears website breaks up their nav into multilevel classes with each hyperlinks and pictures.
Some of the highest classes have photographs for kitchen home equipment, mattresses, and residential furnishings. But the deeper classes embody direct hyperlinks to issues like cutlery and tableware.
Remember you may make a mega navigation fairly tall and nonetheless make it usable. So there’s room for a row of photographs and a row of textual content hyperlinks for nearly any nav.
But you can additionally go the route of a smaller menu like with PlayStation’s dropdowns.
Their navs additionally embody a very good mixture of photographs with textual content, a lot of that are labels for particular person pages.
If you’ve the time to design customized icons you can do that to your personal website. Include an icon subsequent to every main hyperlink so you’ve visuals plus textual content for navigation.
Alternate Dropdown Techniques
Be prepared to experiment along with your mega navigations. There aren’t any strict guidelines for this and nice UX comes from testing to see what works.
Some web sites actually push the boundaries of dropdowns with customized animations, a number of columns, and even flyout menus that seem out of mega navs. If the menu is usable and works then it’s a job nicely executed.
But you possibly can all the time push a little bit additional should you’re prepared to attempt.
The Open has a typical mega nav menu which expands whereas hovering. But it makes use of one alternate approach which pushes down your complete web page to make room for the brand new menu.
Most mega navs seem on high of the web page however this one animates down whereas transferring all of the web page content material decrease.
Certainly not an ideal concept for each website however it’s distinctive. And if it really works for The Open’s website then it may work for others.
Just relies upon should you’d wish to attempt it out and perhaps run some A/B checks on usability.
Another instance is on the Waterworks website the place the dropdowns don’t seem until you click on.
Again these feel and appear similar to conventional mega navigation menus. But they deviate from the norm(hovering) by concentrating on a special person occasion(clicking).
It has a small “close” button in the nook so there’s a straightforward solution to shut it too. But this in all probability received’t work for each website and it’d be most precious for very tall dropdowns.
Keep all of those developments in thoughts as you progress ahead with mega nav concepts in your personal tasks.
Mega navigation menus are always advancing with new design kinds and methods. Studying different examples is nice for getting began, however actually attempt to assume up your personal concepts to push your menus even additional.