Should mobile navigation maintain state between pages?

Question

I'm creating a typical mobile website, with top navigation revealed by the "hamburger" button.

My questions:

1. Should this menu maintain state between pages (you open it, click an item, and a new page loads, but menu stays open)?

2. Should the dropdowns within this menu maintain state?

Personally, I find it more logical and pleasant that navigation stays open between pages if I opened it.

On the other hand, I see many mobile/responsive websites just making the navigation closed again on each page. Maybe the advantage is that it requires less scrolling from the user.

What's the best practice here?

Answer 1

I would keep it closed due to limited space. If you want to go back to the page you can open it again. But users are not that likely to mess that up and being forwarded to a new page would be pretty annoying if the first thing you need to do is close the hamburger menu to get it out of your way to start browsing.

Here are some popular examples that close it once you click on it

• Stack exchange app
• Rhapsody unRhadio app
• Pandora app
• Smashing Magazine (responsive web page)
• NHL.com (responsive web page)

One scenario where you could leave it state-full is if it doesn't take up enough real estate to hide content. Such a hamburger menu could possibly toggles presentation features too like changing languages or changing a color scheme. However these instances I feel would be very rare.

Answer 2

Due to limited screen space, you should have it close after the user has made their selection.

Because the user will have the ability to dig into the menu (and submenus), they will be able to see all their available options before selecting one. Once the user selects one, the odds of them wanting to immediately select another menu option are slim to none.

Take this YouTube App for example. The user starts out with wanting to click on a specific channel. Once they find that channel, they are not going to want to close the menu themselves or go to another channel, so it automatically closes.

image source

You should also take a look at this question on UX.SE that goes into some more discussion about the Hamburger Menu, especially in this answer.