Header Navbar

Component 10

About

A responsive site header with a navigation bar, animated logo, optional banner slot, and an animated mobile disclosure menu.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Header Navbar to your project and fits it to your theme.

Code

How Header Navbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Navbar } from "@/components/ui/header-02"
import Link from "next/link"
import { ChevronRightIcon } from "lucide-react"

export default function Page() {
  return (
    <div className="flex h-screen w-full flex-col overflow-hidden">
      <Navbar
        banner={
          <Link
            href="/blog/radiant-raises-100m-series-a-from-tailwind-ventures"
            className="flex items-center gap-1 rounded-full bg-fuchsia-950/35 px-3 py-0.5 text-sm/6 font-medium text-white data-hover:bg-fuchsia-950/30"
          >
            Radiant raises $100M Series A from Tailwind Ventures
            <ChevronRightIcon className="size-4" />
          </Link>
        }
      />
      <section className="flex flex-1 items-center justify-center">
        <h1 className="text-foreground text-4xl font-bold">Hero</h1>
      </section>
    </div>
  )
}