Navbar
The persistent top bar carrying a product's primary destinations, identity and account controls.
UI ComponentsThe navbar is the most viewed component in any product and the most contested piece of real estate in the company. Every team wants their feature in it, which is how a five-item bar becomes eleven items and a “More” menu that nobody opens. The defence is a stated rule for what qualifies — a destination used in most sessions by most roles — applied before the argument rather than during it.
Two jobs are easy to miss. It must say where you are, not only where you can go: an active state that survives on sub-routes is what stops people getting lost three levels deep. And the mobile version is a different component, not a squeezed one — a hamburger hiding primary navigation reliably reduces its use, which is fine for secondary items and costly for the one thing you want people doing.
Navbar and sidebar together
In dense products the navbar carries global context — account, environment, search — and a sidebar carries product structure. Splitting them this way keeps the top bar stable while the left column grows with the product.
In practice
A SaaS product moved its primary navigation behind a hamburger on tablet to make room for a promotional item. Feature discovery for two secondary modules fell by about half in six weeks. Restoring the visible bar and dropping the promo recovered it within a month.
Where teams get it wrong
- Growing past five to seven primary items, then adding a “More” menu instead of deciding.
- No active state, or one that disappears on sub-routes.
- Hiding primary navigation behind a hamburger on tablet and desktop.
- A sticky navbar deep enough to eat the fold on short laptop screens.
- The logo not linking home.
Learn more
You may ask
Frequently Asked Questions
How many items should a navbar have?
Five to seven primary destinations. Past that people stop scanning and start hunting, and a “More” menu is usually a decision being avoided rather than a structure being expressed.
Should a navbar be sticky?
On long pages, yes — reaching navigation without scrolling to the top is worth the space. Keep it shallow, and shrink it on scroll, so it does not consume the fold on small laptop screens.
Related terms
All terms- Sidebar NavigationA vertical navigation column that scales to real product structure — grouping, nesting and staying visible while you work.
- BreadcrumbA trail showing where the current page sits in a hierarchy, and a way back up it.
- BannerA full-width message at the top of a page or app, for conditions that affect everything below it.
- Information ArchitectureThe structure of a product's content and navigation — how things are grouped, labelled and related so people can find what they need.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us