Navbar v1
A dynamic and reusable Navbar component with customizable links, logos, and actions.
The Navbar component provides a responsive navigation bar with customizable links, brand logo/title, and styling options.
It is designed to be flexible enough to handle both simple and complex navigation layouts.
GSAP
Framer Motion
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
brand | string or ReactNode | "Logo" | The brand name or logo displayed on the left side of the navbar. |
links | { label: string; href: string }[] | [] | Array of navigation links with label and href. |
sticky | boolean | false | Makes the navbar fixed to the top of the screen when true. |
className | string | "" | Custom CSS classes for styling the navbar container. |
onLinkClick | (href: string) => void | undefined | Callback function triggered when a navigation link is clicked. |
Default Example
import { NavbarExtended } from "@/components/FingUIComponents/landing/navbar-01";
export default function Page() {
return <NavbarExtended />;
}Customizable Navbar
import { NavbarExtended } from "@/components/FingUIComponents/landing/navbar-01";
import { Home, Info, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function CustomNavbarPage() {
return (
<NavbarExtended
brandName="MyApp"
logoLight="/logos/light.png"
logoDark="/logos/dark.png"
navOptions={[
{ title: "Home", href: "/", icon: Home },
{ title: "About", href: "/about", icon: Info },
{ title: "Contact", href: "/contact", icon: Phone },
]}
activeColor="text-green-500"
rightActions={
<>
<Button variant="default">Login</Button>
<Button variant="secondary">Sign Up</Button>
</>
}
/>
);
}