Navegación

Patrones de navegación: header flotante, sidebar y mobile menu.

Header flotante

Usado en landing pages. Fixed top, con border redondeado y backdrop blur.

<header className="fixed top-0 z-50 w-full">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <nav className="mt-4 flex items-center justify-between rounded-full 
      border border-zinc-800 bg-black/70 px-6 py-3 
      backdrop-blur-xl shadow-lg shadow-black/20"
    >
      {/* Logo */}
      <a href="/" className="flex items-center gap-2">
        <img src="/logo.png" alt="Codeway" className="h-9 w-9" />
        <span className="text-lg font-bold text-white">
          codeway<span className="text-blue-500">.</span>
        </span>
      </a>

      {/* Nav links (desktop) */}
      <ul className="hidden md:flex items-center gap-8">
        <li>
          <a href="#section" className="text-sm text-zinc-400 
            hover:text-white transition-colors">
            Link
          </a>
        </li>
      </ul>

      {/* CTA */}
      <Button variant="primary" size="sm">
        Acción principal
      </Button>
    </nav>
  </div>
</header>

Sidebar

Usado en dashboards y documentación. Fixed left, 256px (w-64).

<aside className="fixed top-0 left-0 z-40 h-screen w-64 
  border-r border-zinc-800 bg-zinc-950/80 backdrop-blur-xl"
>
  {/* Logo area */}
  <div className="px-6 py-5 border-b border-zinc-800">
    ...
  </div>

  {/* Nav sections */}
  <nav className="px-4 py-6 space-y-8">
    <div>
      <h4 className="mb-2 px-2 text-xs font-semibold 
        uppercase tracking-wider text-zinc-500">
        Sección
      </h4>
      <ul className="space-y-0.5">
        <li>
          <Link 
            href="/page" 
            className="block rounded-lg px-3 py-2 text-sm 
              text-zinc-400 hover:text-white hover:bg-zinc-800/50"
          >
            Item
          </Link>
        </li>
      </ul>
    </div>
  </nav>
</aside>

{/* Main content offset */}
<main className="flex-1 ml-64">...</main>

Menú móvil

Dropdown que aparece debajo del header en mobile. Con backdrop blur.

{isMenuOpen && (
  <div className="mx-4 mt-2 rounded-2xl border border-zinc-800 
    bg-black/95 p-6 backdrop-blur-xl md:hidden"
  >
    <ul className="space-y-4">
      <li>
        <a href="#" className="block text-base text-zinc-400 
          hover:text-white" onClick={() => setIsMenuOpen(false)}>
          Link
        </a>
      </li>
    </ul>
  </div>
)}