Components/Interactive Navbar

Interactive Navbar

A modern interactive navigation bar with hover spring animations and mobile support.

import Navbar from "@/components/interactive-navbar"

export default function Page() {
  return (
    <Navbar
      logo="Acme"
      logoHref="/"
      links={[
        { title: "Home", href: "/" },
        { title: "About", href: "/about" },
        { title: "Services", href: "/services" },
        { title: "Contact", href: "/contact" },
      ]}
    >
      <button>Sign Up</button>
      <button>Login</button>
    </Navbar>
  )
}

Installation

pnpm dlx shadcn@latest add https://dev-roshan-com.vercel.app/r/interactive-navbar.json

Usage

Import the component in your project pages.

import Navbar from "@/components/interactive-navbar"

export default function Page() {
  return (
    <Navbar
      logo="Acme"
      logoHref="/"
      links={[
        { title: "Home", href: "/" },
        { title: "About", href: "/about" },
        { title: "Services", href: "/services" },
        { title: "Contact", href: "/contact" },
      ]}
    >
      <button>Sign Up</button>
      <button>Login</button>
    </Navbar>
  )
}

API Reference

Configure your component behavior using these props.

Prop	Type	Default	Description
`links`	`NavLink[]`	[{ title: 'Home', href: '/' }, ...]	Array of navigation link objects with `title` (string) and `href` (string) properties.
`logo`	`ReactNode`	"Interactive"	Custom logo element (text or JSX) displayed on the left side of the navbar.
`logoHref`	`string`	"/"	The href for the logo link. Clicking the logo navigates to this path.
`className`	`string`	—	Additional Tailwind CSS class names applied to the inner `<nav>` element for custom styling.
`children`	`ReactNode`	Default Sign Up / Login buttons	Custom action buttons or elements rendered on the right side of the navbar. If omitted, default Sign Up and Login buttons are shown.