• OUR BLOG

3 Alternatives to the Hamburger Navigation Menu

2018-03-08

The simple 3-line, Hamburger menu icon (usually located at the top of a webpage) hides additional pages and extra navigation, making for a decluttered, cleaner look for your websites and apps. While cleaner can often seem like it is better, easy access to content and intuitive navigation for your users should always come first. Here are some effective alternatives to using the ever-popular Hamburger menu:

  1. THE TAB MENU (examples; Ticketmaster, Facebook)

A ton of high-volume apps and enterprise company websites feature tabs as an alternative to the Hamburger menu. The tab menu allows you to display the most useful content sections to your users with no guessing required!

Tabs are most often seen across the top of your screen and are displayed using full text (as seen on the Ticketmaster app). Alternatively, when many tabs are required icons can also be substituted as well. Most importantly, these tabs should represent the functions you want your users to have easy access to.

  1. PROGRESSIVELY COLLAPSING MENUS (examples; BBC News, The Guardian)

A progressively collapsing menu is essentially a responsive and complex version of the tab menu. Your full menu will adapt to any size screen, reducing the number of “tabs” based on your user’s screen size. This is particularly effective for mobile browsers using small (and varied) screens.

With the right design and functionality, this menu style will prioritize the menu sections most important to your users and utilizes space effectively on every size screen. This UI incorporates the “more” button allowing your users to navigate through additional tabs and content on your site.

  1. BOTTOM NAVIGATION (examples; Facebook, Pinterest)

Bottom navigation should be visually appealing, easy to understand and simple to navigate. Similar to the icons that have been used by Microsoft for decades, make them easily identifiable and intuitive. Regardless of how obsolete the floppy disk is, it will always mean “save”.

To optimize your user experience, combine bottom navigation with tabs at the top, a search bar, or a more button for additional content sections.

 

Every App and website serves a different purpose and has different audiences - UI is by no means one size fits all. The magic lies in considering the main functionality of your app or website, knowing what you want your users to do, and how best to create an intuitive experience

Ensure your design is clear, concise and that your top content is displayed in a way that’s easy for your users to navigate through.