Navigation patterns that stay out of the way

Navigation is the most-touched, least-noticed part of any product. Done right, users never think about it. Done wrong, it's the first complaint in every support ticket, and the last thing teams want to revisit because rebuilding it touches every page.

There are really only four navigation models that ship in modern web products. Pick the one that fits your information density and your audience, then follow the rules that keep it quiet.

The four models

1. The marketing top bar

A horizontal bar at the top of the page with 4–7 links, a logo on the left, and a CTA on the right. Linear, Vercel, Stripe, every B2B landing page uses some variant of this. It works because visitors are scanning, not navigating, and a horizontal list reads at a glance.

Beyond 7 links, the bar gets crowded and the CTA loses primacy. Push the rest into a footer sitemap or, if you really need them, a mega menu.

2. The product sidebar

A vertical column on the left with grouped links, often collapsible. This is what every modern web app converges on past a certain feature density, Linear, Notion, Vercel dashboard, Stripe dashboard, GitHub. The sidebar can hold 20+ items without breaking; a horizontal bar cannot.

The trap: putting account settings, billing, and admin into the same sidebar as core navigation. Settings live in a separate surface (a modal, a separate route, or behind the avatar menu). The sidebar is for product navigation only.

3. The mega menu

A wide panel that drops from a top-bar item, organized into columns. Apple, Stripe, and most enterprise SaaS use them because the product surface is too wide for a single row of links. Mega menus signal we have many things, which is the right signal for an enterprise audience and the wrong one for a startup.

If you ship one, organize columns by intent (Solutions / Industries / Resources), not by feature. Visitors scan column headers first, items second. Make the headers carry their weight.

4. The mobile sheet

A hamburger that opens a full-screen sheet with the same links the top bar held. This is the mobile fallback for the top bar; on tablets it's a judgment call. The mistake: replicating a desktop mega menu inside the sheet. On mobile, collapse to a flat list of 5–8 destinations and a CTA.

The rules that make nav quiet

• Active state has to be unambiguous. A subtle background tint isn't enough, use a stronger weight, an accent color on the text, or a hairline indicator on the side. Users need to know where they are without thinking.
• The logo always returns home. No exceptions. The logo is the universal escape hatch and treating it as a link to anything else breaks a 25-year convention.
• The CTA is the only filled button in the bar. Everything else is ghost or link. Two filled buttons and the CTA stops being the CTA.
• Sticky top bars need a translucent background with backdrop blur, not a solid one. Solid sticky bars compete with the page content. Translucent ones disappear until you scroll past a section break.
• Mobile nav opens in <50ms. Animations longer than that feel sluggish on a phone. If you want polish, the polish is in the easing curve, not the duration.

Pair nav with command menu, not against it

Every app dense enough to need a sidebar also needs a command menu. They serve different audiences, visual navigators use the sidebar, keyboard-first users hit ⌘K, and shipping both means you don't have to compromise either. The sidebar can stay focused on primary surfaces because the command menu carries the long tail.

Ship one

The navigation entry in the directory has the anatomy and tuned prompts for the top bar, sidebar, mega menu, and mobile sheet patterns. Pick the model that fits your density and ship the variant, type scale, active-state styling, mobile breakpoints all encoded.