Navigation Bar

Top navigation bar (primary site/global nav) with branding and key links

What is it?

A navigation bar (navbar) sits at the top of a page and provides primary site navigation, brand/logo, and key actions (search, profile, CTAs). It often collapses into a mobile menu for small viewports.

Mockdown

```
┌────────────────────────────────────────────────────────┐
│ [Logo]  Home  Features  Pricing  Docs        [Sign in] │
│                           [Primary CTA]                │
└────────────────────────────────────────────────────────┘
```

Characteristics:
- Brand/logo on the left
- Primary links grouped centrally or left
- Secondary actions (auth, CTA) on the right
- Responsive collapse into a hamburger menu

Layouts Using This Pattern

┌───────────────────────────────────────────────┐
│  Logo        Features  Pricing  ◆ Get Started │
├───────────────────────────────────────────────┤
│                                               │
│         Build something amazing.              │
│      The fastest way to ship your app.        │
│                                               │
│    [ Get Started ]    [ Learn More → ]        │
│                                               │
├───────────────────────────────────────────────┤
│  ┌───────────┐ ┌───────────┐ ┌───────────┐   │
│  │  ⚡ Fast  │ │  🔒 Safe  │ │  📦 Easy  │   │
│  │  Feature  │ │  Feature  │ │  Feature   │   │
│  │  desc...  │ │  desc...  │ │  desc...   │   │
│  └───────────┘ └───────────┘ └───────────┘   │
├───────────────────────────────────────────────┤
│  "Loved by 10,000+ developers" ★★★★★         │
├───────────────────────────────────────────────┤
│  Logo · Twitter · GitHub · © 2026             │
└───────────────────────────────────────────────┘

Landing Page

SaaS Product Landing Page

A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.

--hero--cta--features

Medium

Use these prompts to generate layouts built with this pattern.

--nav --navbar --header --menu --branding

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts