The navbar is the first component users interact with and the last one designers want to rebuild for the hundredth time. Here are eight Figma navbar component patterns that cover every common use case — from minimal marketing sites to complex SaaS applications — with notes on when to use each.
1. The Minimal Marketing Navbar
Logo left, 3–4 navigation links center or right, one CTA button. This is the default pattern for landing pages and marketing sites. It keeps the eye moving toward your hero content rather than getting stuck on navigation.
In Figma, build this with a top-level auto layout frame set to space-between horizontally. The logo and CTA are fixed width; the nav links stretch to fill.
2. The Sticky Scroll-Aware Navbar
Starts transparent over the hero, gains a background and shadow when the user scrolls. This is the most common pattern on SaaS homepages in 2025. In Figma, design two states: the transparent version and the scrolled version. In code, you'll implement the transition — but your design file should show both states clearly so developers know what they're building.
3. The Centered Logo Navbar
Logo centered, navigation links split left and right. Popular for editorial, fashion, and premium product brands. Less common in SaaS but effective when you want the brand to feel primary. Build in Figma using three columns: left nav group, centered logo, right nav group. Set all three to “fill container” horizontally.
4. The Mega Menu Navbar
Navigation items with dropdown panels — often used by complex SaaS products with many feature categories. The dropdown panels can contain featured links, product screenshots, or blog highlights. In Figma, design the open state of each dropdown as a separate frame linked via interactive components (prototype mode).
5. The Mobile Hamburger Navbar
A collapsed navigation hidden behind a hamburger icon, revealed via a slide-in drawer or full-screen overlay. Design both states in Figma: the collapsed mobile header and the expanded mobile menu. Use component variants to toggle between them in prototyping mode.
This pattern pairs with any desktop navbar — your Figma navbar components should always include a mobile variant.
6. The Dashboard Sidebar Nav
For authenticated SaaS app interiors — a left sidebar with icon+label navigation instead of a top horizontal bar. The sidebar handles complex navigation hierarchies better than a topbar. In Figma, use a fixed-width sidebar frame with auto layout rows for each nav item. Include active, hover, and default states as component variants.
7. The Tab-Based Sub-Navigation
A secondary navigation pattern for pages with multiple views: settings tabs, analytics sections, profile sections. Sits below the main navbar or at the top of a page section. Design the selected tab with a bottom border underline style, unselected tabs with lower-opacity text.
8. The App Bar (Mobile-First)
For mobile applications or progressive web apps — a bottom navigation bar with icon+label items. Google's Material Design popularised this; it's now standard for mobile-first products. Each tab should have active/inactive states as component variants.
Navbar + Hero = Your First Critical Impression
The navbar and hero section are always designed together — they share the same visual space above the fold. Once you've sorted your navbar pattern, the natural next step is your hero section component. The two need to work as a unit: background colours, spacing, and typography should feel unified.
You can also check our guide on building a full SaaS landing page in Figma for how the navbar fits into the complete page flow.