Navigation is the most-tested element on any website. It is the first thing every visitor uses, the last thing every visitor blames when they cannot find something, and the place where most redesign projects burn the most time. The pattern that works in 2026 is a clean primary nav with five to seven top-level items, mega menus only when the catalog genuinely justifies them, a thoughtful mobile menu that does not just shrink the desktop nav, and disciplined attention to accessibility and search.
Information architecture comes first
Navigation design is downstream of information architecture. If the IA is wrong, no navigation pattern will save it. If the IA is right, almost any navigation pattern will work. Get the IA right first.
The cleanest pattern for most marketing sites: group pages by user intent (“Why this product,” “What it does,” “Who it is for,” “What it costs”) rather than by internal team structure (“Engineering,” “Marketing,” “Sales”). A site organized around the buyer’s questions converts faster than one organized around the company’s org chart. Card sorting and tree testing with real users is the fastest way to validate IA before wasting design time on the wrong skeleton.
For most B2B SaaS sites, the working IA pattern is: Product (or Features), Solutions (or Use Cases or Industries), Pricing, Resources (or Customers), Company. For agencies and studios: Work, Services, About, Insights, Contact. For ecommerce: Shop categories, Sale, About, Help. None of these are universal, but they are good starting points.
The 5 to 7 item rule
Top-level navigation should hold five to seven items, plus a primary CTA and any utility items (login, search, account). Eight or more top-level items signals one of two problems: the IA is too flat (categories that should be grouped are not), or the company is trying to please too many internal stakeholders (“every team gets a nav slot”). Ten or more items is almost always a sign of organizational dysfunction more than user need.
The CTA in the top-right (“Start free,” “Get a demo,” “Contact sales”) is now expected. It typically sits visually distinct from the rest of the nav (a filled button instead of a text link). One CTA is right; two CTAs is acceptable if they serve very different audiences (“Log in” plus “Get started”); three or more CTAs starts to dilute attention.
Mega menus, used carefully
Mega menus (large dropdowns with multiple columns of links and sometimes featured content) are the right choice when the catalog is genuinely large and the visitor needs to scan many options at once. They are the wrong choice when there are only three to five items underneath and a simple dropdown would do.
The patterns that work for mega menus: clear column headings that match user intent, no more than three to four columns per menu, a featured content block in one column (a hot product, recent customer story, key resource), generous spacing, and immediate keyboard accessibility. Open on hover with a small delay (200 to 300 ms) to avoid accidental triggers, and ensure they open on click for keyboard and touch users. Stripe, Notion, and Atlassian all run high-quality mega menus. Many B2B sites would do better with simple dropdowns.
Avoid mega menus that include every page on the site. The point of the mega menu is curation: surface the most important destinations, not every link the team wants to push. A mega menu with 60 links is harder to use than a mega menu with 20.
Mobile navigation patterns
Mobile navigation is its own design problem. The hamburger icon is now universally understood, but the menu behind it is where most sites fail. The patterns that work: a full-screen overlay menu with large tap targets and clear hierarchy, a slide-in side panel for sites with deep navigation, or a bottom sheet for ecommerce-style sites where users frequently switch between a small set of categories.
Inside the mobile menu: top-level items should be tappable to navigate (going to the section’s index page) with a separate “expand” affordance to reveal subsections, not a single tap that ambiguously expands or navigates. Include the primary CTA prominently inside the mobile menu, not just in the closed nav bar. Add quick utilities at the top or bottom (search, login, language, contact). Our mobile-first design guide covers the broader breakpoint strategy.
Sticky headers on mobile are useful but get complicated. They eat 60 to 80 pixels of screen real estate on every page, but they keep navigation accessible during long-form content. The pattern that works for many B2B sites: sticky on scroll up, hidden on scroll down (so users can read content uninterrupted, but get the nav back when they reach for it). For pure marketing sites, a non-sticky header with a clear scroll-back affordance is often cleaner.
Accessibility in navigation
Navigation is one of the most-failed components in accessibility audits. Common issues: dropdowns that are not keyboard accessible, mobile menus that trap focus inside the menu after closing, missing skip-to-content links, ambiguous link text, and contrast failures on hover or focus states.
Practical fixes: use semantic HTML (a nav element wrapping a list of links, with proper ARIA labels), ensure every interactive element is reachable via Tab and operable via Enter or Space, provide a visible focus indicator on every link and button, include a skip-to-main-content link as the first focusable element on every page, manage focus correctly when opening and closing mobile menus, and announce open/closed state to screen readers via aria-expanded.
Test with a keyboard alone (no mouse) and a screen reader (NVDA on Windows, VoiceOver on macOS). If the nav cannot be operated this way, it is broken. Our website accessibility guide covers the audit checklist in detail.
Search as navigation
For sites with deep content (universities, large ecommerce catalogs, documentation, knowledge bases), site search is more important than the visible nav. Power users and returning visitors search; first-time visitors browse. Both must work.
The patterns that work for prominent search: a visible search input in the top-right, with a keyboard shortcut (Cmd+K or /) for power users. Type-ahead suggestions ranked by relevance and category. Faceted filters on the search results page. A clear no-results experience that suggests popular pages or a contact path. Algolia, Typesense, and Mintlify Search are the off-the-shelf tools most teams reach for; building search in-house is rarely worth the engineering investment.
For pure marketing sites with 30 to 100 pages, a discreet search icon that opens a search overlay is enough. For sites with 500 or more pages, search becomes a primary navigation surface and deserves first-class design treatment.
Breadcrumbs and secondary navigation
Breadcrumbs work for hierarchical content (documentation, ecommerce category pages, blog archives, university program trees). They do not belong on flat marketing sites where most pages are siblings. The rule of thumb: if the site has more than three levels of hierarchy and pages live deep in the tree, breadcrumbs help. If everything is one click from the homepage, breadcrumbs add clutter.
For long-form content pages (documentation, blog posts, guides), a sticky table of contents in a side rail is a powerful secondary navigation pattern. It functions as a mini-map, helps SEO via clearly demarcated sections, and improves dwell time. Notion, Linear’s docs, and most modern documentation sites use this pattern.
Common navigation mistakes
Top nav with 12 items because every department wanted representation. Mega menus that hide the most important page (often Pricing) two clicks deep. Mobile menus that simply shrink the desktop nav into an unscrollable list. Hamburger icons that fail to communicate “menu” to less-technical audiences. Hover-only dropdowns that are inaccessible to keyboard and touch users. Search inputs that return generic results from a poorly indexed backend. Sticky headers that take up 25 percent of the mobile screen. Logo links that do not return to the homepage. “Solutions” mega menus that contain only marketing fluff and no real navigation. Account dropdowns that do not show whether the user is signed in.
One more, and it is the biggest: navigation that changes between pages of the same site. The user learns the nav on the homepage and expects it to behave the same way everywhere else. Inconsistent navigation between marketing, app, and documentation surfaces creates a sense that the site is held together with tape.
Recommended platform considerations
Modern navigation patterns (mega menus, accessible mobile drawers, search-driven navigation) require either a real component framework or a platform with strong primitives. Framer ships with mega menu components and accessible navigation primitives out of the box, which makes navigation work cheap to implement well. Webflow requires more manual configuration but is workable. Custom Next.js builds give the most flexibility but cost the most time. Older WordPress themes often ship with rigid nav patterns that are hard to upgrade without a full rebuild. For a deeper platform comparison, our Framer vs WordPress comparison covers the practical implications.
Frequently Asked Questions
How many items should be in the top navigation?
Five to seven primary items, plus a CTA and any utility items (login, search, language). More than seven and the nav becomes hard to scan. Less than five often signals that the site has not surfaced enough of its content; users have to dig to find what they need.
When should I use a mega menu?
When the catalog under a single nav item is genuinely large (more than five to eight sub-pages), and when grouping helps users scan. Avoid mega menus when a simple dropdown of three to five items would suffice. Always make sure the mega menu is keyboard accessible and operable on touch devices.
Should the navigation be sticky on scroll?
For long-form content sites and applications, yes. For short marketing pages with one or two scrolls of content, sticky nav can feel like screen real estate waste. The compromise: sticky on scroll-up, hidden on scroll-down, which keeps nav accessible without dominating the screen during reading.
What is the right mobile navigation pattern?
For most sites, a hamburger icon that opens a full-screen overlay or slide-in drawer works best. For ecommerce with frequent category switching, a bottom sheet or persistent bottom nav can outperform. The wrong pattern for almost every site: a mobile nav that is the same as desktop, just shrunk. Mobile needs its own design.
Should pricing always be in the top navigation?
For most B2B SaaS sites, yes. Hiding pricing behind “Contact sales” or burying it under a dropdown signals lack of confidence and frustrates buyers who want to qualify themselves. The exception is enterprise-only products where there is no list price; even then, a “Pricing” or “Plans” page that explains the model (per-seat, usage-based, custom) earns trust.
If you want a site with navigation that holds up across desktop, mobile, and assistive tech without a six-month build cycle, we ship Framer sites with production-ready navigation systems out of the box. Talk to our team and we will scope your build.