Great Alternatives to Hamburger Menus
How to make your navigation obvious and keep people engaged
This is a much debated topic and while designers, developers mostly agree on when it is a good idea to use a navigational drawer and when not there are still a lot of mobile apps that rely on this pattern. It usually boils down to the fact that there is no place to put navigation on a small screen, because it lacks a well thought out information architecture or just because of the sheer amount of content.
If your app gets too complex, think about unbundling. Look at what Facebook did with Messenger. They broke out functionality around key actions and put it in their own separate app.
Hamburger menus drive engagement down, slow down exploration and confuse people. If you are reading this, it won’t confuse you, but it damn will confuse others who might be happy to consume your content.
Tabs
Tabs help organize content in categories, like you would under a navigational drawer. People will instantly know how to use it. Use labels or combine it with icons.
Bottom navigation
A close relative of tabs deserving its own category. The pattern is adopted on both platforms — iOS and Android — mostly “always visible” and composed of icons with labels. The navigation bar could be hidden/revealed on downward and upward scrolling. One note that I would add, even though Google recommends not using a description for the inactive icons in some cases, I am strongly for using labels. Don’t make navigation a guessing game for users.
Show more
If there are more menu items that fit on the screen you can add a show more option. Reduce your list to the top four actions that you want your users to make and put the remaining items under a modal or popup or even a new page. You have the option to expand your settings here and enrich it as it fits with requirements.
Scrollable navigation
Similar to “Show more” this is another approach for longer lists. Make it scrollable so that users can move it from side-to-side. Icon only solution can work with well educated power users, but make sure to test it before commiting.
Inline
You can lay out top categories in the main application hub. That would be your home page in case of a web app. These groups can be laid out as a list with distinctive headers. Under the categories you can present the content as horizontally scrollable cards for easy access or whatever works best for the content.
Segmented control
If there are only a couple of destinations, you can use a segmented control. All options are visible at once and can be accessed with a single tap.
Don’t hide search
It’s not just navigation that people hide behind the hamburger menu. If search is a key functionality of your app, it needs to be in front of people. Don’t hide it. You can either display it at the top of the screen or have a visible reference which will go into search mode.
Always design with content
I cannot stress this enough. Always design with real content, otherwise you’ll end up with placeholders, lorem ipsums and hamburger menus inside hamburger menus. Content on its own doesn’t make sense, and layouts without content either.
The fact that hamburger menus are a bad choice is backed up by actual numbers and is proven by companies that make money on time spent in-app. So if you have to convince someone — a client, boss or manager — why switching to a more obvious navigational pattern is a good idea, this could help.
- As @lukew puts it Obvious always wins.
- Facebook, YouTube, Spotify did away with it. This is why.
- Project management company Redbooth switched to bottom navigation after extensive research and doubled usage, in-app time and engagement. Read about it here.
Don’t make your navigation the drawer where you put all things you don’t have a place for. Think it through and use alternatives if you can. Obvious should always be the preferred choice. Make sure to subscribe for more articles like this and check out the tools we build to help you create better navigation.
Written by Levi Kovacs. Originally published on the Mobiscroll blog.
If you enjoyed reading, it would be great if you could hit the green 💚 ‘Recommend’ button below to help others find it on Medium.
