Header

Note

This component uses client-side React hooks, so you must wrap it with a "use client" directive when using an SSR framework.

Usage

Organizing the links in a seperate object is recommended, as it allows for easier management and updates.

const navigation = [
    {
        name: "Services",
        href: "/services",
    },
    {
        name: "News",
        href: "https://news.neody.land/"
    },
    {
        name: "About Us",
        href: "/about",
    },
    {
        name: "Terms",
        href: "/terms",
    },
    {
        name: "Privacy",
        href: "/privacy",
    },
    {
        name: "Partners",
        href: "/partners",
    },
];

const buttons = [
    {
        href: "https://my.mikandev.com/",
        title: "My Account",
    },
    {
        title: "🌎",
        onClick: () => {
            changeLanguage();
            },
    },
];

Then, you can use the Header component like this:

import Logo from "@/assets/logo.svg";

<Header
    navigation={nav}
    buttons={buttons}
    className="text-white"
    color="#FF9900"
    brand={{
            showTitle: false,
            name: "Neodyland",
            href: "/",
            logo: Logo.src,
        }}
/>

You can also wrap a React component around the Header component to add additional functionality, such as a language switcher or an image.

import Logo from "@/assets/logo.svg";
import Wordmark from "@/assets/wordmark.svg";

import Image from "next/image";
import Link from "next/link";

<Header
    navigation={nav}
    buttons={buttons}
    className="text-white"
    color="#FF9900"
    brand={{
            showTitle: false,
            name: "Neodyland",
            href: "/",
            logo: Logo.src,
        }}
>
    <Link href="/">
        <Image
            src={Wordmark.src}
            alt="Neodyland"
            width={400}
            height={400}
        />
    </Link>
</Header>

Take a look at the header on this site's homepage to see it in action.

Props

Prop	Type	Default
`children?`	`ReactNode`	-
`brand`	`Brand object`	-
`color?`	`string`	-
`buttons?`	`Buttons object array`	-
`navigation`	`Navigation object array`	-

Header

Install

Usage

Props

On this page