Sidebar Navigation

A sidebar is a vertical navigation column. It exists because horizontal space runs out at about five items and vertical space does not, which makes it the pattern for any product with real structure.

Its advantage over a navbar is not only capacity. A sidebar can group, nest and show where the current page sits — it displays the structure rather than hiding it behind a menu.

What it costs

Horizontal space, on every screen, permanently. In a data-dense product that space competes directly with the table beside it, and on a laptop the competition is real.

Which is why the width should be a decided number rather than an inherited one, and why collapse matters more here than in most components.

Collapsed must stay usable. Icons with tooltips, the current location still marked, and an obvious way back. A collapsed sidebar that becomes a mystery strip has traded the space for nothing.

The choice persists. Per user, across sessions. A collapse that resets on navigation is a control that undoes itself, and people stop using it.

Structure

Two levels, occasionally three. Anything deeper is invisible to anybody who does not already know it exists, and it is a signal to revisit the information architecture rather than to add another indent.

Group by the user's model, not the org chart. The most common structural fault in B2B navigation is a sidebar that mirrors which team built what. See information architecture.

Remember what was open. Auto-collapsing every section on navigation means re-expanding the same one all day. Auto-expanding the section containing the current page is worth doing on arrival.

Frequency beats alphabetical. The destinations people use hourly belong at the top even where that looks unbalanced.

Settings at the bottom, separated. Near-universal convention, and following it costs nothing.

Marking the current location

A sidebar that looks identical on every screen has stopped navigating.

The active item needs a treatment beyond colour — a background, a rule, a weight change — because colour alone excludes a real share of users.

The parent of the active item should show it too, so somebody deep in a section can see which section they are in without expanding anything.

Scroll the active item into view when a long sidebar loads on a deep page. Arriving at a page whose navigation entry is below the fold is disorienting for no reason.

B2B specifics

Workspace switching belongs above the navigation, not inside it, because it changes what every item below means.

Permissions change the items. Hide what a person cannot reach rather than showing it inert. A member looking at six greyed-out destinations learns that the product is mostly not for them, which is rarely the intended message.

Counts and status belong here where they drive attention — items needing review, failed jobs. With the badge discipline: a count nobody can clear is a count nobody reads.

Long tenant and project names need handling. Truncate with the full name available, and do not let one customer's naming convention set the column width.

Mobile

A sidebar becomes a drawer, and the same rules apply as any overlay: focus moves in, Escape closes, focus returns, the page behind does not scroll. Mobile navigation breaks these more often than modals do, and the failure is invisible to anybody testing with a mouse.

In practice

A product's sidebar has fourteen items in three groups, all collapsed by default, resetting on every navigation.

Watching support agents use it shows what that costs. Their work spans two sections, so every navigation begins with two clicks to re-expand what they had open a moment ago. Across a day that is hundreds of clicks spent restoring state the product already knew.

Persisting the expanded sections per user removes it entirely. No new features, no restructure — the product simply stops forgetting.

The complaint that reached the team had been "navigation is clunky", which is not actionable. The measurement that made it actionable was counting the clicks.

Where teams get it wrong

• A collapse that resets. A control that undoes its own work.
• Three or four levels of nesting. Structure nobody can hold.
• Mirroring the org chart. Grouping users cannot predict.
• Colour-only active state. Navigation that does not say where you are.
• Disabled items for missing permissions. A product that reads as closed.
• Forgetting what was expanded. A small tax, charged all day.