Navigation Bar

Navigation

Fixed top navigation with logo, desktop links, and mobile hamburger menu. Supports scroll-aware frosted glass effect.

Code Example

<header className="fixed top-0 w-full z-50 border-b bg-background/80 backdrop-blur-sm">
  <div className="max-w-6xl mx-auto px-6 flex items-center h-16">
    <a href="/" className="font-bold text-lg">Brand</a>
    <nav className="hidden md:flex items-center gap-6 ml-auto">
      <a href="/about" className="text-sm text-muted-foreground hover:text-foreground">About</a>
      <a href="/features" className="text-sm text-muted-foreground hover:text-foreground">Features</a>
      <Button size="sm">Get Started</Button>
    </nav>
  </div>
</header>

Variants (2)

Transparent

Transparent background, transitions to frosted glass on scroll

variant= "transparent"scrollAware= true

Solid

Solid background color from the start

variant= "solid"scrollAware= false

Guidelines

Do

Keep navigation items under 7
Use frosted glass background on scroll
Include mobile hamburger for < 768px
Highlight the active page
Place primary CTA as the rightmost button

Don't

Nest dropdowns more than 1 level deep
Use icons without labels on desktop
Hide critical pages behind a hamburger on desktop
Auto-hide the nav on scroll-down for content-heavy pages

Use Cases

Every public-facing app
Portal sites requiring multi-page navigation
Sites with 4-7 top-level pages

Details

Category: Navigation
Reference Component: NavBar
Variants: 2
Guidelines: 5 dos, 4 donts

Back to all patterns