"use client" import React, { useEffect, useState } from "react" import { motion } from "motion/react" import Link from "next/link" import { LucideIcon } from "lucide-react" import { cn } from "@/lib/utils" export interface NavItem { name: string url: string icon: LucideIcon } export interface NavBarProps { items: NavItem[] className?: string } export function NavBar({ items, className }: NavBarProps) { const [activeTab, setActiveTab] = useState(items[0].name) const [isMobile, setIsMobile] = useState(false) useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768) } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return (

{items.map((item) => { const Icon = item.icon const isActive = activeTab === item.name return ( setActiveTab(item.name)} className={cn( "relative cursor-pointer text-sm font-semibold px-6 py-2 rounded-full transition-colors duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]", "text-foreground/80 hover:text-primary", isActive && "bg-muted text-primary", )} style={{ transitionProperty: "color, background-color, box-shadow, border-color", WebkitTapHighlightColor: "transparent", }} > {item.name} {isActive && ( )} ) })}

) }

Name	Type	Default	Required	Description
items	NavItem[]	-	Yes	Array of navigation items with name, URL, and icon.
className	string	-	No	Additional class names for the navbar container.

Command Palette

Navbar

Installation

Install Dependencies

Copy and Paste the component

Usage

Props