Hamburger Menu

A narrow screen can't lay out every menu item in one row. With seven items and 360 pixels of width, you either shrink the labels or wrap to a second line, and when neither appeals, folding is what's left.

Pagedeck's mobile screens were there. Noa folded seven items — documents, shared, templates, search, notifications, team settings, and account — behind a single icon. The top of the screen opened up and the document list gained two more rows.

A month later, visits to team settings had halved. Nothing had been removed or moved; the item had simply become one press further away, and that was enough. Saving space at the cost of leaving the field of view is what this form is.

One button and the panel it opens. Five things get decided.

1. The icon — three horizontal lines. That shape alone still doesn't read as "menu" for some users, so a small label under it raises the rate at which it gets pressed.
2. How it opens — sliding in from the side or covering the whole screen. Seven items or fewer suit sliding in; more than that, or any nested items, read better on a full cover.
3. Ways to close — provide all three: pressing the same button again, pressing outside the panel, and the Escape key. With only one, some users open it and can't get out.
4. The open indicator — while the panel is open, the icon usually becomes a close mark. Changing shape in place means nobody hunts for where to press again.
5. Accessibility — announce to a screen reader both that it's a button and whether it's currently open. Move focus to the first item when the panel opens and back to the button when it closes.

Frequently used items don't go behind the icon. The common approach is to surface the three items people press several times a day and fold only the rest — pairing it with a tab bar, which lays the main areas along the bottom of the screen, is the usual shape. On wide screens it stops being folded at all and becomes a sidebar running down the side, where nothing is hidden and nothing costs an extra press.

"Don't put this one in the hamburger. People press it several times a day."

Hiding a frequently used item drops visits to it.

"Add the word Menu under the icon."

The shape alone doesn't carry meaning for some users.

"On desktop this should be a sidebar rather than a hamburger."

There's no reason to fold anything when the width is available.

Noa reworked Pagedeck's mobile navigation. Documents, search, and notifications moved out to tabs along the bottom, only the remaining four stayed behind the hamburger, and the word Menu went under the icon. Visits to team settings returned to their old level, and of the four still folded, only templates saw fewer visits than before.