Core Header Navbar

Dashboards 65

About

CoreHeader – A sleek top navigation bar for dashboards and apps. Displays the page title, user identity, and avatar, with a subtle background pattern for a modern look.

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

Code

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

Usage.tsx

import { SimpleNavbar, SecondaryNavbar } from "@/components/ui/core-header-navbar";
import { useState } from "react";

export default function DemoOne() {
  const [type, setType] = useState("react");

  return (
    <div className="w-full">
      <SimpleNavbar
        title="Dashboard"
        userName="kumail 21st dev"
      />

      <SecondaryNavbar
        currentType={type}
        onTypeChange={setType}
        links={[
          { name: "React", href: "react" },
          { name: "Next.js", href: "nextjs" },
          { name: "Full Stack", href: "fullstack" },
          { name: "UI/UX", href: "uiux" },
        ]}
      />
    </div>
  );
}