Floating Header

headerfrom Community Creative

Live

AI Usage Rules

Use FloatingHeader for modern landing pages. The header floats above content with glassmorphism styling. Keep navigation to 4-5 items max. The CTA button should be the primary action (e.g., "Get Started").

Code Template

interface FloatingHeaderProps {
  logo: string
  navLinks: Array<{ label: string; href: string }>
  ctaText?: string
  ctaLink?: string
}

export function FloatingHeader({ logo, navLinks, ctaText, ctaLink }: FloatingHeaderProps) {
  return (
    <header className="fixed top-4 left-1/2 z-50 w-full max-w-4xl -translate-x-1/2 px-4">
      <nav className="flex items-center justify-between rounded-2xl border border-white/10 bg-black/60 px-6 py-3 shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl">
        <a href="/" className="text-lg font-bold text-white">{logo}</a>
        <div className="hidden items-center gap-6 md:flex">
          {navLinks.map((link) => (
            <a key={link.href} href={link.href} className="text-sm text-gray-400 transition-colors hover:text-white">{link.label}</a>
          ))}
        </div>
        {ctaText && ctaLink && (
          <a href={ctaLink} className="rounded-full bg-white px-4 py-1.5 text-sm font-medium text-black transition-all hover:bg-gray-200">{ctaText}</a>
        )}
      </nav>
    </header>
  )
}

Props Schema

Property	Type	Default
logo	string	—
ctaLink	string	—
ctaText	string	—
navLinks	array	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "logo": {
      "type": "string"
    },
    "ctaLink": {
      "type": "string"
    },
    "ctaText": {
      "type": "string"
    },
    "navLinks": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "href": {
            "type": "string"
          },
          "label": {
            "type": "string"
          }
        }
      }
    }
  }
}