1

The hamburger menu that we've all become familiar with, is great for hiding a menu, but if you have a website or application that has multiple menus that you need to hide, what is best practice for using the hamburger menu more than once?

Possible use cases for a hamburger icon:

  1. Main navigation menu in header
  2. Utility menu for account links
  3. Listing of editable items in a table with a set of operations
  4. Footer menu

People may have personal opinions about this but it would be more productive if you could explain why and perhaps provide references to back things up.

There is another thread about this on ux.stackexchange, but its specific to having them in the nav bar, which is a slightly different context, and it hasn't been answered properly. For relevance sake here is the thread: What to do if more than 2 hamburger icons in nav bar?.

Improve this question
2
  • 1
    Be careful here. You're working on an assumption that everyone knows what a hamburger menu is, and that is not that case. And hiding navigation - regardless of how familiar people are with that icon or not - will make it harder for people to navigate your site.
    – JonW ♦
    Commented Nov 10, 2014 at 8:16
  • Maybe try a Hamburger, Cheeseburger and Chickenburger menu? But seriously, couldn't you make one hierarchically structured menu, which contains all your menus? You could also make a flat list, but separate groups visually (navigation, logon, footer links, ...)
    – CodeManX
    Commented Nov 11, 2014 at 3:31

2 Answers 2

Reset to default
1

I'd agree with the answer in the other thread you linked; two would be confusing so the "best practice" is probably "don't do it". Users who are less accustomed to the hamburger menu might not know what it is even if there's only one, and having multiple of the same icons would be even more confusing since it'd be the same icon that does different things.

The Facebook Android app has a hamburger menu for its main menu, and then also a sliding menu for displaying online friends with a gear icon in that section for further options related to that feature. This makes logical sense, even if it is a few extra taps to get there. This wouldn't really work on a website, but you also have more room to work with then.

Some thoughts on your use cases:

Main navigation menu in header

In a mobile app, I've come to expect a hamburger menu or similar (Android) or the system-defined menu (Windows Phone). On a desktop website I'd prefer not hiding the navigation at all, but some sites get away with a hamburger menu or a hamburger menu with a caption.

Utility menu for account links

"Utility" seems to imply a gear icon to me, but it really depends what you mean.

Listing of editable items in a table with a set of operations

Again it depends what you mean, but if something is editable I'd expect a pencil icon or similar.

Footer menu

I don't think I've ever seen a hamburger menu in the footer of something.

Improve this answer
3
  • Thanks for detailed answer. Re: the facebook android app has a slightly altered version of the hamburger menu for accessing the friends list, which avoids the duplicate hamburger use, and seems to makes sense. Re: footer menu - yeah, I was just trying to come up with other use cases for hiding menus, I've not seen it in a footer either! Cheers.
    – alexkb
    Commented Nov 11, 2014 at 2:51
  • Re: Again it depends what you mean, but if something is editable I'd expect a pencil icon or similar. - agreed, the pencil is a good use, but each editable item, might have edit, delete, status, etc, so it's a group of operations for each row. Perhaps a down arrow is better for that use case?
    – alexkb
    Commented Nov 11, 2014 at 2:59
  • 1
    That is true that technically the Facebook app has a "second" hamburger menu, but the modified icon does indeed help in that case. As for each editable item might have multiple options, then I would agree that a down arrow (or maybe a "..." icon depending on your design) would be better. If it would fit and not look too cluttered, though, not hiding anything would probably work best; at least don't hide the most commonly-accessed tools if it's a key feature of your app - it'd be like if Facebook hid the "Like" and "Comment" buttons on every post where they hide the "Edit" and "Delete" options.
    – ipavl
    Commented Nov 11, 2014 at 4:50
3

I recommend that you reserve the hamburger icon only for the main navigation menu. Whether you agree on its viability or not, it's been adopted in many designs (and propagated by the likes of Bootstrap) that a common pattern can be derived that (1) it is used primarily for the main menu and (2) it is used once.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.