Skip to main content

Navbar

Navbar, short for "navigation bar," is a graphical user interface element that is commonly used in websites and applications to provide users with a way to navigate the different sections or pages of a website or application.

The navbar typically appears at the top of the webpage or application and contains links or buttons that allow users to access different sections or pages of the site. It may also contain other elements, such as search boxes, login forms, or dropdown menus, depending on the needs of the website or application.

Default Navbar​

The default Technotic Navbar

To call technotic's navbar:

import { Navbar } from "technotic";

<Navbar />;

Customize the navbar for your project by specifying the title, navigation links, and button links, each with their corresponding href attributes.

You can customize the title or logo of the navbar according to your website

<Navbar title={<img src="/image.png" alt="logo" />} />

You have the flexibility to modify the navbar links title of the website as per your preferences.

<Navbar
    navLinks={[
        { text: "Home", href: "/" },
        { text: "About Us", href: "/about-us" },
        { text: "Products", href: "/products" },
        { text: "Event", href: "/events" },
    ]}
/>

The final customization option allows you to modify the button link

<Navbar buttonLink={{ text: "Register", href: "/" }} />

Complete Navbar​

This is how a comprehensive navbar with customizable options looks like

<Navbar
    title={<img src="/image.png" alt="logo" />}
    navLinks={[
        { text: "Home", href: "/" },
        { text: "Products", href: "/products" },
        { text: "Event", href: "/events" },
    ]}
    buttonLink={{ text: "Contact Us", href: "/contact" }}
/>