Nativ ui
Documentation

Navbar

Navigation bar patterns and components.

Basic Structure

<header class="sticky top-0 z-50 border-b bg-background/95 backdrop-blur">
  <div class="container flex h-14 items-center">
    <a href="/" class="font-bold">Logo</a>
    <nav class="ml-6 hidden md:flex gap-6">
      <a href="/features">Features</a>
      <a href="/pricing">Pricing</a>
      <a href="/about">About</a>
    </nav>
    <div class="ml-auto flex items-center gap-4">
      <a href="/login">Log in</a>
      <a href="/signup" class="btn-primary">Sign up</a>
    </div>
  </div>
</header>

Patterns

Sticky Header

<header class="sticky top-0 z-50">

Blur Background

<header class="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">

Mobile Menu

Use a hamburger menu on mobile with a slide-out drawer.

Best Practices

  1. Keep it simple - 5-7 navigation items max
  2. Highlight CTA - Make primary action stand out
  3. Mobile-first - Design for mobile, enhance for desktop
  4. Sticky positioning - Keep nav accessible while scrolling
  5. Blur effect - Modern backdrop blur for overlapping content