About
A blog header bar with a title and an optional inline navigation menu that highlights the current page.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Header Navigation to your project and fits it to your theme.
Code
How Header Navigation is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { HeaderNavigation } from "@/components/ui/header-navigation";
export default function Default() {
return (
<div className="bg-background text-foreground font-serif w-full flex items-center justify-center px-6 py-8">
<div className="w-full max-w-[960px]">
<HeaderNavigation
title="Gymnopédies"
menuItems={[
{ name: "Home", onClick: () => {} },
{ name: "Essays", onClick: () => {} },
{ name: "Archive" },
{ name: "About", onClick: () => {} },
]}
currentIndex={2}
/>
</div>
</div>
);
}
More by shoota
View all
Article
7
Picture
2
More in Navigation
View all
Sidebar
286
Navbar
1
Tabs
34
Oversized 404 Numeral
57
Sidebar
348
Breadrcrumb
8
Pagination
91
Pagination
15
