Inspiration: 8 alternatives to the Hamburger Menu

As we discovered in our last post (Website Trends for 2017) traditional navigation menus are out of fashion, reducing the clutter and allowing for smaller screens, but where does that leave our menu?

Many opted for the hamburger menu until people started to shout about what a poor decision that would be and we quote TechCrunch here “that three lined button is the devil”.

With mobile sites taking prevalence the hamburger menu was a delicious option for saving space but statistics started to wash up citing poor user engagement for two reasons; it’s out of reach (literally) and it still confuses users.

Web Design Menus Mold Agency

The natural reach of your thumb (unless you have really big hands)

So what’s the alternative?

Floating Action

Technically, this is still a Hamburger menu but much of the problem is the Hamburger is often positioned out of reach (as we showed above). The solution here is to opt for a floating Hamburger Menu, where the button is within thumb reach and stays conveniently close by even when scrolling.

Web Design Menus Mold Agency

 

 

 

 

 

 

 

 

Tabs and Tab drawer

This is a big player for mobile apps and websites, keeping the important menu functions to hand without cluttering the screen. You also add extra options in a tab drawer!

Web Design Menus Mold Agency

Priority+

Priority+ is a responsive menu type; while you have a full size screen it will display all of the menu options but as screen size is reduced options are limited to those with priority and the rest is neatly tucked away under the “More” option.

Web Design Menus Mold Agency

Swipe

Think Snapchat; it’s a little confusing at first and might have people leaving your site out of frustration but if your target audience is a mobile savvy user then this could be a trendy alternative to the Hamburger menu.

Web Design Menus Mold Agency

 

Vertical Nav

Stick it on the side! A fun and creative way to incorporate your menu options to the design of your site and the benefit of this on mobile is that you can make use of all that vertical screen space!

Web Design Menus Mold Agency

 

Menu spread around the screen

Just say goodbye to reason; have fun and scatter your menu options around the screen!

Web Design Menus Mold Agency

 

Mega Menu

A Mega Menu is great for option-heavy sites like e-commerce sites with a full-scale catalogue. This keeps the main menu tidy but opens up for better user experience.

Web Design Menus Mold Agency

 

Traditional

We know we said this is totally un-trendy but sometimes it’s best to go for the traditional menu bar; after all it has done us proud for so many years!

Web Design Menus Mold Agency