navigation

Navbar

The primary horizontal navigation bar at the top of a page or application.

The navbar is the most-seen component in any product. It must be immediately legible, consistently placed, and communicate both where users can go and where they currently are.

Anatomy

  • Logo/wordmark
  • Navigation links
  • Search (optional)
  • Actions/CTA
  • User menu

Variants

Transparent (over hero)Opaque (solid colour)Sticky (fixed on scroll)Frosted (glassmorphism)App bar (for web apps)

States

DefaultActive page (highlighted link)Scrolled (shadow appears)Mobile (hamburger menu)

Rules

✓ Do

  • •Max 5-7 navigation items
  • •64px standard height
  • •Sticky for app navigation
  • •Active state on current page

✗ Don't

  • ×Don't put the nav below 48px — too small
  • ×Don't have more than 7 nav items
  • ×Don't hide primary navigation behind a hamburger on desktop

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Navbar: 64px height, logo left, main nav links centred or right, CTA button far right. Sticky. Active state: accent text + 2px bottom border. Mobile: slide-out drawer menu at < 768px.