Hamburger menu alternatives for mobile navigation

1. Tabs

  • You should have no more than five sections to display
  • One of the tabs should always be active and should visually be highlighted
  • The first tab has to be the home page or home screen and the order of the tabs should relate to their priority or logical order in the user flow
  • Tabs can either be displayed at the top or at the bottom of the screen, based on the context or platform (however, bottom tabs are now a pattern in Android, too)
  • Icons without labels only work for common actions with really well known icons and for interfaces that the users use frequently (e.g. social media apps)
  • More tips on designing tabbed navigation

Examples: LinkedIn and Google Photos

Icon-only tabs on LinkedIn and icon+label tabs on Google Photos

2. Tabs with a ‘more’ option

Example: Facebook

News feed, friend requests, notification, and search is always available in the header, all the remaining functionality is available from the ‘more’ menu on Facebook

3. Progressively collapsing menu

Example: BBC

The main menu of BBC is rendered according to the actual screen size to always show as many items as possible

4. Scrollable navigation

Examples: Medium and Google

The main categories can be scrolled at smaller screen sizes on Medium.com
Categories of the Google search results page are available in a scrollable view

5. Dropdown menus

Example: Barnes & Noble and Duolingo

When browsing books, the current category and the navigation/filtering options are always available in a dropdown menu on bn.com
While not a common interaction for most users, Duolingo allows to quickly switch between the languages you practice via a dropdown

And sometimes, surprisingly, the hamburger menu might be a good choice

Conclusion

--

--

--

UX enthusiastic design principal at IBM, co-organizer of Amuse UX Conference and co-author of UX Myths. Views are my own. http://kollin.hu

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zoltan Kollin

Zoltan Kollin

UX enthusiastic design principal at IBM, co-organizer of Amuse UX Conference and co-author of UX Myths. Views are my own. http://kollin.hu

More from Medium

Case Study: Designing an app that allows you to easily find amusement parks near you!

Should You Switch Between Procreate and Photoshop?

Interaction Design: 5 Components

UI CHALLENGE: A story of race against time, tachycardia and the virtue of the middle ground.