React Series #09: How to create Header in react next.js project

Create header components as I explained in this post. Let’s have 3 main elements in the header, Logo (Image), Links (Navigation), and Button.

Install Navigation Menu from Shadcn/UI

npx shadcn-ui@latest add navigation-menu

Install Button

npx shadcn-ui@latest add button

Import Section

import React from "react";
import Image from "next/image";
import Link from "next/link";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu";
import { Button } from "@/components/ui/button";

Main function code

function Header() {
  return (
    <div className="p-5 shadow-sm flex gap-5 justify-between container">
      <div className="flex items-center">
        <Link href={"/"}>
        <Image
          src={"logo.svg"}
         width="186" height="41"
          alt={"Rax Logo"}
          priority={true}
        />
        </Link>
        <NavigationMenu className="hidden md:block">
          <NavigationMenuList className="flex items-center">
            <NavigationMenuItem className="pr-5 pl-5">
              <Link
                className="hover:scale-105 hover:text-primary cursor-pointer gap-5"
                href={"/"}
              >
                Home
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Link
                className="hover:scale-105 hover:text-primary cursor-pointer gap-5"
                href={"/about-us"}
              >
                About Us
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem className=" pl-5">
              <Link
                className="hover:scale-105 hover:text-primary cursor-pointer gap-5"
                href={"/products"}
              >
                Products
              </Link>{" "}
            </NavigationMenuItem>
            <NavigationMenuItem className="pr-5 pl-5">
              <Link
                className="hover:scale-105 hover:text-primary cursor-pointer gap-5"
                href={"/contact-us"}
              >
                Contact Us
              </Link>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
      <div>
        <Button>Login</Button>
      </div>
    </div>
  );
}

export default Header;

Header Preview