A SaaS website header is the persistent navigation bar at the top of the page that typically includes the logo, primary navigation links, authentication CTAs (login/signup), and sometimes a search field or notification area. For marketing sites, it anchors the user’s sense of where they are and provides access to the most important product areas. For product dashboards, it serves as the control layer — workspace selector, notifications, search, and account settings.
We analyzed 208 header screenshots across 258 SaaS products in the SaaS Boat library. Across that set, headers reveal more about a product’s information architecture and audience understanding than almost any other design element.
Figma
Notion
Stripe
Intercom
Canva
Webflow
Framer
Asana
Retool
Vercel
Netlify
GitLab
Auth0
Supabase
Calendly
Chargebee
Hotjar
Gong
Miro
DatadogTwo Types of SaaS Headers
Marketing headers (on the .com website) communicate what the product is, guide visitors to key pages (features, pricing, case studies), and convert visitors with sign-up CTAs. They’re evaluated on clarity, conversion, and hierarchy.
Product headers (inside the app dashboard) are navigation and utility tools for existing users. They’re evaluated on efficiency: can a user find what they need without thinking about it?
Both share one constraint: limited horizontal space, competing priorities, and users who move fast.
30 Header Examples from Real SaaS Products
Marketing Headers
1. Figma — Logo + Product + Enterprise + Sign In + Get started
Figma’s header is clean: logo left, five nav items center, “Sign in” and “Get started” CTAs right. The hierarchy communicates who Figma is for: individual users get “Get started” (high-visibility), enterprise buyers get “Enterprise” (in nav, lower friction). No mega-menu needed when the product is focused.
2. Notion — Minimal nav with “Get Notion free” as the CTA
Notion keeps its marketing header to logo + 5 nav links + login + “Get Notion free.” The CTA copy appears in the header itself — not just “Sign up.” This makes the header actively conversion-oriented, not just navigational.
3. Stripe — Dark header for authority
Stripe uses a dark header on a light marketing page — a visual pattern that signals stability and gravity. The dark bar draws the eye and creates a clear visual anchor. For a payments infrastructure company, the header aesthetic communicates maturity.
4. Intercom — Products mega-menu
Intercom has a complex suite (Support, Engage, Convert), so their header uses a mega-menu under “Products” that shows each sub-product with an icon, name, and one-sentence description. Complex product portfolios need drop-down menus that clarify, not just link.
5. Canva — Use-case oriented navigation
Canva’s marketing header organizes nav by use case (Education, Teams, Nonprofits) rather than by product feature (Templates, Editor, Brand Kit). Use-case navigation helps users find themselves in the product rather than requiring them to understand the product’s internal structure.
6. Webflow — Audience-segmented navigation
Webflow has separate navigation paths for Designers, Teams, and Enterprise. This is a deliberate separation of audiences within the same header. Different nav items appear depending on who the visitor is — though this is done with visible tabs rather than dynamic personalization.
7. Framer — “Start for free” as the header CTA
Framer’s header has “Start for free” as a persistently visible CTA button. This is aggressive but appropriate for a self-serve product with a clear free tier. The CTA in the header converts visitors who decide to sign up before scrolling the full page.
8. Asana — Transparent header on hero, solid on scroll
Asana uses a transparent header over the hero image that transitions to a solid background on scroll. This creates a layered aesthetic that makes the hero section feel more spacious without losing navigation utility.
9. ClickUp — Persistent announcement banner above header
ClickUp frequently uses an announcement strip above the main header: “New: ClickUp AI is here. Try it free →”. This pattern adds a layer of marketing real estate without changing the header itself.
10. Miro — Product navigation at enterprise scale
Miro’s header includes Products (by team type), Solutions, Templates, Pricing, and Resources — covering the enterprise evaluation journey in one bar. Enterprise buyers need multiple nav paths because evaluation involves multiple stakeholders.
11. Retool — Developer-first navigation
Retool’s header skips the usual “Features” and “Pricing” structure for “Use cases,” “Documentation,” “Pricing,” and “Log in.” Putting documentation in the main nav acknowledges that their audience (developers) reads docs before booking demos.
12. Vercel — Minimal, confidence-forward
Vercel’s marketing header is extremely sparse: logo, 4 nav items, “Log in” and “Sign up.” No mega-menus, no announcement bars. For a product whose users know exactly what they want, minimal navigation is respectful rather than unhelpful.
13. Netlify — Documentation visible in header
Netlify includes “Docs” as a primary nav item alongside “Products,” “Solutions,” “Pricing.” Surfacing documentation at the top-level signals that the product is for technical users who will need to read before they ship.
14. GitLab — Platform navigation at complexity scale
GitLab’s header has “The DevSecOps Platform,” “Solutions,” “Resources,” “Partners,” “Pricing,” and “Contact sales.” This is a long header — appropriate for a product with a complex enterprise evaluation cycle involving multiple teams (Dev, Sec, Ops).
15. Auth0 — “Why Auth0?” as a nav item
Auth0 uses “Why Auth0?” as a top-level navigation item — a direct answer to the prospect’s primary question. This is a CRO-oriented header design: put the competitive differentiation argument where users are already looking.
16. Supabase — Open-source signals in header
Supabase includes a GitHub star count button in their header — a developer credibility signal that typical SaaS products don’t use. For open-source products, community size shown in the header itself communicates momentum.
17. Calendly — “Sign up free” with embedded value claim
Calendly’s header CTA reads “Sign up free” and sits beside a note: “No credit card required.” The objection handler appears inside the header — before users scroll, before they’ve even considered cost.
18. Chargebee — “Start your free trial” persistent header CTA
Chargebee’s header keeps “Start your free trial” visible as a sticky CTA that follows users as they scroll. For a complex billing tool with a long evaluation cycle, the persistent CTA keeps conversion accessible when the prospect is finally ready.
19. Hotjar — Behavior-focused nav
Hotjar’s header includes “Heatmaps,” “Session Recordings,” “Surveys,” and “Interviews” as nav items — feature-first navigation. This works because Hotjar users typically arrive knowing which specific tool they want. Feature navigation is appropriate when the audience is product-literate.
20. Gong — Revenue intelligence positioning in header
Gong’s header leads with “Why Gong” and “Revenue Intelligence” — positioning first, features second. For a product in a category they partly invented (“Revenue Intelligence”), leading with the category name educates and positions simultaneously.
Product/App Headers
21. Figma — Workspace switcher in header
Inside Figma’s app, the header includes a workspace/team selector on the left, a centered file title (editable in-place), and a share button on the right. The header is the primary tool for collaboration context — who am I working with, on what file, is it shared?
22. Notion — Breadcrumb-style page path
Notion’s app header shows the page path as a breadcrumb: “Workspace > Section > Page.” For a nested document structure, breadcrumb navigation lets users orient themselves in deep hierarchies without getting lost.
23. Slack — Channel header with context panel toggle
Slack’s header per-channel shows the channel name, member count, description, and a right-panel toggle for threads and details. The header provides channel-specific context — you always know what channel you’re in, what it’s for, and who’s there.
24. Asana — Project header with view switcher
Asana’s project view header includes the project name, a view switcher (List, Board, Timeline, Calendar), and add-task CTAs. The view switcher is the most-clicked element after the task list itself — putting it in the header makes mode switching frictionless.
25. ClickUp — Space/Folder/List navigation header
ClickUp’s product header shows the hierarchy: Space > Folder > List as clickable breadcrumbs. For a flexible tool with deep nesting, the header keeps users grounded in the structure they created.
26. Retool — App name + environment switcher
Retool’s app header shows the app name and an environment switcher (Staging, Production). For internal tools where the wrong environment means testing against production data, the environment context in the header is a safety feature, not just navigation.
27. Amplitude — Chart/analysis header with share
Amplitude’s analysis view header includes the chart name, a share button, and a “save” state indicator. For an analytics product, being able to share and bookmark specific analyses from the header — without navigating away — keeps the workflow fluid.
28. Hotjar — Site switcher in header
Hotjar’s product header includes a site switcher — a dropdown to move between different tracked websites. For agencies managing multiple client sites, the header’s site switcher is the primary context-switching mechanism.
29. GitLab — Project context header
GitLab’s header inside a project shows the full path (group/subgroup/project) with clickable segments. For repositories that live inside nested group structures, the full path in the header is essential for orientation.
30. Datadog — Organization and environment in header
Datadog’s product header shows the current organization and environment context. For monitoring tools where the wrong environment shows the wrong alerts, organizational context in the header prevents critical misreadings of the data.
Key Patterns from 208 Header Screenshots
1. Marketing headers should have exactly one primary CTA. The most effective marketing headers have one filled CTA button (sign up / get started / try free) and one ghost or text-link secondary option (log in / contact sales). Multiple equal-weight CTAs create decision paralysis.
2. Product headers need context, not conversion. Inside the app, headers should answer: “Where am I? What am I working on? How do I share or switch?” Marketing copy and CTAs have no place in product headers.
3. Documentation belongs in the header for developer tools. Developer products with “Docs” in primary navigation see higher activation — developers read before they commit. Burying docs in the footer signals they’re an afterthought.
4. Sticky headers increase CTA conversion on long pages. For marketing pages longer than two screens, a sticky header that keeps the sign-up CTA visible captures users who decide midway through their scroll, not just at the top.
5. Mega-menus work only for genuinely complex products. A mega-menu on a single-product company looks like navigation theater. Mega-menus are appropriate when the product has 3+ distinct modules, multiple audience types, or a large content library requiring sectioning.
Frequently Asked Questions
How many navigation items should a SaaS marketing header have?
4-6 is the sweet spot. Under 4 often means missing critical pages (pricing, case studies). Over 6 creates a scanning problem — users can’t prioritize. If you need more than 6, group them into mega-menu categories.
Should the header be transparent or solid?
Transparent headers over large hero images create a more immersive visual experience. Solid headers communicate clarity and stability. Transparent headers that become solid on scroll (like Asana) are a strong compromise.
Where should the signup CTA be in the header?
Top right is the universal convention. Users have been trained over a decade to find “Get started” or “Sign up” in the top right of any website. Deviating from this convention is a conversion risk unless your audience is unusually non-standard.
Should I include pricing in my header navigation?
Yes, if you offer a free tier or self-serve pricing. Hiding pricing from navigation signals that the price is a problem to be discovered later, which creates distrust. Transparent pricing is a trust signal; linking to it from the header makes that transparency obvious.
Browse 208 header design screenshots from real SaaS products in the SaaS Boat library. Filter by product type, industry, and page phase to find patterns relevant to your own header design.
