Credit:https://designmodo.com/mega-navigation-menu/
We’ve all seen mega navigations and fullscreen dropdowns online. They’re common across the web and especially useful on sites with tons of links.
But designing a mega nav that works can be a real pain. There are no strict guidelines for these menus so you have to study what others are doing and try to make something that’ll fit with your project.
Deep Level Categories
The most valuable design style for a mega nav is the column structure.
This lets you designate “categories” for links and create deeper links without using multiple flyout menus. A mega navigation dropdown can span the entire page so you can usually fit at least 3-4 columns in one dropdown.
Take a look at Wayfair which uses a very unique type of dropdown menu. They have a link for “departments” where you can browse by category and even sub-category such as bedrooms > nightstands.
Next to this link is a dropdown for “room ideas” where you can browse based on the room. This dropdown features images next to the links so you have a much easier time browsing through choices.
It doesn’t take long to realize they’re breaking navigation items into categories. These follow a similar trend and Wayfair’s man navigation only needs two main links for this to work!
Alternatively another ecommerce shop Puma has a similar columnar structure.
But they break down categories based on demographics and items, then inside each meganav you find columns for each item type(featured products, clothing, sports, etc).
Notice the columns have their own headers and these stand out from the rest of the links. It creates a true column structure because you can glance through column headers first and browse sub-links from there.
All of their columns have the same color schemes but they use different typography. This can make quick browsing tougher but it’s still just as usable.
Lucky’s animation effects are a nice touch as well so that’s definitely something to consider.
But if you’re struggling with a mega navigation hierarchy try organizing your links into deeper categories first.
Full-Width Dropdowns
This trend isn’t used on every site but I do see it a lot more nowadays.
Huge mega navigation menus can span the entire width of the page to create more room for desktop & laptop users. Mobile users typically have hidden menus so they never really see the full effect anyways.
The navigation for Pluralsight is an excellent example featuring a fullscreen mega menu. The content stays fixed at the same width as the page itself, but the menu does span the entirety of the screen.
It’s a cool effect because it creates more room in the menu. Or it at least gives the visual illusion of more room.
And if you’re running a huge navigation for larger monitors why not go the whole way?
There’s an even split between “normal” dropdown links and thumbnail links going directly to articles.
But again the content remains fixed at the same width as the page while the menu spans the entirety of the screen.
Fantastic effect if you can get it working.More
We’ve all seen mega navigations and fullscreen dropdowns online. They’re common across the web and especially useful on sites with tons of links.
But designing a mega nav that works can be a real pain. There are no strict guidelines for these menus so you have to study what others are doing and try to make something that’ll fit with your project.
Deep Level Categories
The most valuable design style for a mega nav is the column structure.
This lets you designate “categories” for links and create deeper links without using multiple flyout menus. A mega navigation dropdown can span the entire page so you can usually fit at least 3-4 columns in one dropdown.
Take a look at Wayfair which uses a very unique type of dropdown menu. They have a link for “departments” where you can browse by category and even sub-category such as bedrooms > nightstands.
Next to this link is a dropdown for “room ideas” where you can browse based on the room. This dropdown features images next to the links so you have a much easier time browsing through choices.
It doesn’t take long to realize they’re breaking navigation items into categories. These follow a similar trend and Wayfair’s man navigation only needs two main links for this to work!
Alternatively another ecommerce shop Puma has a similar columnar structure.
But they break down categories based on demographics and items, then inside each meganav you find columns for each item type(featured products, clothing, sports, etc).
Notice the columns have their own headers and these stand out from the rest of the links. It creates a true column structure because you can glance through column headers first and browse sub-links from there.
All of their columns have the same color schemes but they use different typography. This can make quick browsing tougher but it’s still just as usable.
Lucky’s animation effects are a nice touch as well so that’s definitely something to consider.
But if you’re struggling with a mega navigation hierarchy try organizing your links into deeper categories first.
Full-Width Dropdowns
This trend isn’t used on every site but I do see it a lot more nowadays.
Huge mega navigation menus can span the entire width of the page to create more room for desktop & laptop users. Mobile users typically have hidden menus so they never really see the full effect anyways.
The navigation for Pluralsight is an excellent example featuring a fullscreen mega menu. The content stays fixed at the same width as the page itself, but the menu does span the entirety of the screen.
It’s a cool effect because it creates more room in the menu. Or it at least gives the visual illusion of more room.
And if you’re running a huge navigation for larger monitors why not go the whole way?
There’s an even split between “normal” dropdown links and thumbnail links going directly to articles.
But again the content remains fixed at the same width as the page while the menu spans the entirety of the screen.
Fantastic effect if you can get it working.More
