The Standard

The burger menu has become a design staple. Mobile navigation would be literal hell without it. You just tap on it and a collapsible menu appears. 

 

Easy to close

Since this menu covers page contents, closing it should be as hassle-free as possible once someone is done with it. A failure to close would render the page virtually impossible to navigate. Customer frustration and site abandonment would probably follow in short order. 

 

People are impatient

In a world where people are more impatient than ever before, streamlining your navigation can never be overemphasized. Physical stores may rely on human inertia to retain customers, but competition in the digital marketplace is much fiercer and advantages are a lot thinner. Your replacement is literally one tab away. It takes almost no effort for customers to switch between e-commerce stores and preventing them from exercising that option should be your top priority.

 

X button

If you’re using an X on the right or left-hand corner as the closing icon, make sure it is big enough and in the same location as the burger menu icon. This is doubly important on mobile where tapping on small icons may prove to be quite problematic. It is just as troublesome on desktop where icons that are way too small may be missed entirely.

 

Swiping gesture

If the menu opens from left to right, a swiping gesture should be possible to close it from right to left.

 

Clicking outside

Tapping outside the menu box should close your burger menu as well.

 

Only on mobile

You don’t really need a burger menu on desktop though. It makes more sense in mobile design. I’ve discussed that here.

EXAMPLES