What belongs in a navbar?

The product's identity, the few destinations people move between constantly, and account controls at the far end. Everything else belongs in a sidebar, a menu or search. A top bar has room for about five items before it stops being scannable.

Should a navbar be sticky?

In a product, usually yes — people navigate from anywhere on a long page. On a marketing site it is a judgement about how much vertical space it costs on a phone. Where it sticks, keep it short: a tall sticky bar takes a permanent bite out of every screen.

What is the difference between a navbar and a sidebar?

A navbar runs horizontally and holds few items; a sidebar runs vertically and scales to many, with room for grouping and nesting. Products with more than about five primary destinations need a sidebar, and a top bar that has grown a scroll or a second row has outgrown itself.

Where should the account menu go?

At the far end, opposite the logo — the convention is strong enough that breaking it costs more than any layout it buys. Inside it: profile, settings, billing where relevant, and sign out at the bottom, separated so nobody hits it by accident.

How should a navbar work on mobile?

As the identity plus one or two critical actions, with the rest behind a menu. The important detail is which actions stay visible: in most products it is search and the primary create action, because those are what people came to do.

Navbar

The persistent top bar carrying the product's primary destinations, identity and account controls.

UI Components

A navbar is the persistent top bar carrying the product's identity, its primary destinations, and account controls. It is the one element present on every screen, which makes its capacity the scarcest space in the interface.

That capacity is about five items. Past that, labels shrink, the row wraps, or something gets hidden — and all three are signals that the structure below has outgrown the container.

What belongs, and what does not

Belongs: the logo or product name as a link home, the small set of destinations people move between constantly, and account controls at the far end.

Does not belong: everything that merely exists. A navbar is not a map of the product; it is the shortest list of places worth reaching from anywhere. See information architecture.

The pressure to add is constant, because every team wants their area in the top bar, and the cost of each addition is paid by every other item. A product with nine top-level items has made all nine harder to find.

	Navbar	Sidebar
Direction	Horizontal	Vertical
Capacity	About five items	Many, with grouping
Nesting	Poorly	Naturally
Costs	Vertical space	Horizontal space
Right for	Marketing sites, simple apps	Products with real structure

A top bar that has grown a second row, a horizontal scroll, or a "More" menu holding half the product has outgrown the pattern. The answer is a sidebar, not smaller type.

The details

Mark the current location. A navbar that looks identical on every screen has stopped being navigation and become decoration. The active item needs a treatment that is not only colour.

The logo goes home. Universally expected, and cheap to honour.

Account controls at the far end. The convention is strong enough that breaking it costs more than any layout it buys. Sign out at the bottom of that menu, separated, so nobody reaches it by accident.

Keep it short if it sticks. A sticky bar takes its height out of every screen forever, which on a laptop is a real loss.

Search deserves the space in any product with more than a few dozen destinations, and pairs naturally with a command palette for people who type.

Mobile

The identity, one or two critical actions, and everything else behind a menu.

Which actions stay visible is the decision that matters. In most products it is search and the primary create action, because those are what people opened the app to do — not the settings that happen to be alphabetically first.

The menu itself needs to be a real menu: focus moves into it, Escape closes it, focus returns, and the page behind does not scroll while it is open. These are the same rules a modal follows, and mobile menus break them more often than modals do.

In B2B

Workspace or tenant switching usually belongs here, near the identity, because it changes the meaning of everything below.

Environment markers — staging, impersonation — belong across the whole bar rather than as a small label, for the reasons under banner.

Permissions change the items. A navbar built for an admin, shown to a member with half its destinations inert, teaches people that the product is mostly closed to them.

Notification counts attached here should follow the badge rules: a count nobody can clear becomes a count nobody reads.

In practice

A product's navbar holds seven destinations. Each was added by the team that owned it, and the row now wraps at common laptop widths.

Analytics show two of the seven carry almost all navigation. Three more are used occasionally. Two are essentially unvisited — they were added for launches and never removed.

The change is not a redesign. Two items stay in the bar, three move into a sidebar with the rest of the structure, and two are removed after checking that nothing links to them.

The wrapped row had been reported as a visual bug for a year. It was a structural signal, and reading it as one was the whole fix.

Where teams get it wrong

A navbar as a product map. Every addition taxes every other item.
No current-location marker. Navigation that never says where you are.
A second row or a scroll. The pattern outgrown, and disguised.
Everything behind a hamburger on mobile. Including what people came to do.
Admin-shaped items shown to everyone. A product that reads as closed.

Learn more

UI/UX design for B2B SaaS →