Overview
The navigation bar (topbar) is the first thing users see and interact with. It sets expectations for the entire site experience and determines whether users can quickly find what they need.
The navigation bar serves as the primary wayfinding mechanism for your entire site. It's the first point of interaction and sets the tone for user experience.
Effective navigation reduces cognitive load by presenting clear, scannable options. Users should be able to understand your site structure at a glance.
The navigation should adapt to different contexts: sticky headers for long pages, simplified mobile versions, and contextual changes based on user state (logged in vs. logged out).
Best practices
Actionable guidelines to implement this component effectively.
- Keep it short: 4–6 primary links max; everything else goes in secondary navigation or the footer.
- Use clear, specific labels ("Pricing", "Security", "Docs"): avoid clever names that make users think.
- Make the primary CTA visually distinct (e.g., "Start free", "Book a demo") and keep it consistent across pages.
- Support keyboard + focus states, and ensure contrast works on the hero background (especially with a glass header).
- Use sticky navigation for long pages, but consider hiding it on scroll-down and showing on scroll-up for mobile.
- Include a logo that links to home: this is expected behavior users rely on.
- For authenticated users, show account/profile links and consider a simplified navigation focused on product features.
Common patterns
Popular variations and approaches you'll see across successful SaaS sites.
Simple horizontal menu
A clean horizontal list of links, typically left-aligned with a CTA on the right. Best for sites with 4-6 main sections.
- •Linear: Product, Solutions, Pricing, Blog + Get Started CTA
- •Stripe: Products, Solutions, Developers, Company + Sign in
Mega menu
Dropdown menus with multiple columns showing subcategories and featured content. Useful for complex product suites.
- •HubSpot: Products dropdown with categories, features, and use cases
- •Atlassian: Products organized by team size and function
Glassmorphism / transparent header
Semi-transparent header that blends with hero sections. Creates a modern, seamless look but requires careful contrast management.
- •Vercel: Transparent header over gradient hero
- •Framer: Glass effect with backdrop blur
Examples
Real-world implementations from top SaaS companies.
Linear
View site →Minimal navigation with just 4 links plus CTA. Uses a subtle glass effect on scroll. Excellent keyboard navigation and focus states.
Stripe
View site →Clear, scannable navigation with logical grouping. Primary CTA stands out. Includes a "Sign in" link for existing users.
Vercel
View site →Transparent header that becomes solid on scroll. Clean typography and excellent mobile menu implementation.
Accessibility considerations
Ensure your component is usable by everyone.
- Ensure all navigation links are keyboard accessible and have visible focus indicators.
- Use semantic HTML: <nav> element with proper ARIA labels for complex menus.
- For dropdown menus, support Escape key to close and arrow keys to navigate.
- Include skip links for keyboard users to jump past navigation to main content.
- Ensure sufficient color contrast (WCAG AA minimum) between text and background, especially for glass headers.
- Provide alternative text for logo images or use text-based logos.
- Test with screen readers to ensure menu structure is announced correctly.