Navbar

A responsive top navigation bar component, styled with Tailwind. Not auto-wired into layout.tsx — import it where needed, e.g. `import { Navbar } from '@/components/navbar'`.

Copy the files below, or open this folder on GitHub. Each file is stamped with a limited-use licence, generator and date. SHA-256 is of the published catalog bytes, before the stamp.

id: navbar
stack: Next.js
version: 1.0.0
compatibility: nextjs >=16 <17 · react >=19 <20
requires: tailwind
env vars: —

Verified passing · daily buildIntegrity sha256:0119fc4aa8be0746…

Files (1)

components/navbar.tsx · sha256:0119fc4aa8be0746…

// Licensed by BotKelp — https://www.botkelp.com

import Link from 'next/link';

const LINKS = [
  { href: '/', label: 'Home' },
  { href: '/login', label: 'Sign in' },
];

export function Navbar() {
  return (
    <nav className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
      <span className="text-lg font-semibold"><%= projectName %></span>
      <ul className="flex gap-4">
        {LINKS.map((link) => (
          <li key={link.href}>
            <Link href={link.href} className="text-sm text-slate-600 hover:text-slate-900">
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}