Navbar

Navigation

About

A horizontal site header with a brand monogram, a row of navigation links that highlights the active page, and a right-aligned action or badge slot.

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

Code

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

Usage.tsx

import Navbar from "@/components/ui/navbar";

export default function NavbarDemo() {
  return (
    <div className="w-full bg-background p-8">
      <div className="mx-auto w-full max-w-xl">
        <Navbar
          brand="BIGBULL"
          items={[
            { label: "EVENTS", href: "#", active: true },
            { label: "STUBS", href: "#" },
            { label: "VENUES", href: "#" },
          ]}
        />
      </div>
    </div>
  );
}