Sidebar

Menus lived in a horizontal bar across the top for a long time, and a horizontal bar works fine at about five items. Pagedeck started with five up top: documents, teams, templates, search, settings.

As features grew, the bar stopped coping. At twelve items the labels crowded or wrapped onto a second line, and once it wraps you cannot tell which items sit at the same level. The bigger problem was hierarchy. A structure with folders under a team and documents under those folders has no representation in a horizontal bar, so opening a folder replaced the entire screen.

A vertical strip has far more room to grow than a horizontal one. Turning the menu on its side to use that room is what this form is.

A vertical column is reserved down the left of the screen and destinations are listed inside it. The width is fixed, usually 240 to 280 pixels, and the rest goes to content. It is fixed so that the menu stays in the same place as you move between screens.

Going vertical buys two things.

1. Room for more items. Twenty fit without the labels crowding.
2. Hierarchy shown through indentation. Pressing a team expands its folders one level in, and pressing again collapses them. Which folder holds the document you are reading stays visible on the same screen.

Inside, it usually splits into three blocks: the product's main areas at the top, things the user created in the middle, and account and settings at the bottom.

What cannot be left out is the current-location marker. Without the item matching the current screen standing out, a sidebar stops being a way to move and becomes a list.

The longer the column gets, the more items fall below the fold. An item pushed down there is in much the same position as one hidden inside a collapsed menu, so anything a first-time user has to reach goes where no scrolling is needed. On narrow screens it collapses to icons only or hides entirely — and hidden entirely is the same thing as a hamburger menu, which tucks the menu behind a three-line icon.

"Twelve items won't fit in the top bar. Let's move to a sidebar."

Horizontal room ran out, so the form changes to a vertical one.

"I can't see which document I'm in from the sidebar."

The current-location marker is missing.

"Collapse it on mobile. And only four items go in the tab bar."

On a narrow screen the same destinations get redrawn in a different form.

Pagedeck uses a sidebar on desktop and a tab bar at the bottom of the screen on phones. The part Noa spends longest on when pairing the two is deciding what to leave out. Twenty items can sit in a sidebar while only four reach a tab bar, so where the other sixteen go has to be decided item by item.