Navbar

v1.0.0

Navigation

A responsive navigation bar component with mobile menu support.

Dependencies

@radix-ui/react-navigation-menu

framer-motion

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/navbar.json

Manual Installation

// 1. Install dependencies
npm install @radix-ui/react-navigation-menu framer-motion

// 2. Copy the component code to components/ui/navbar.tsx

// 3. Usage example:
import { Navbar } from "@/components/ui/navbar"
import { Button } from "@/components/ui/button"

const items = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
]

export function MyNavbar() {
  return (
    <Navbar
      logo={<span>My Brand</span>}
      items={items}
      actions={<Button>Get Started</Button>}
    />
  )
}

Props

Component properties and their types

logo

React.ReactNode

default: undefined

Logo or brand element

items

NavItem[]

default: []

Navigation items

actions

React.ReactNode

default: undefined

Action buttons (login, signup, etc.)

Examples

Code example for this component

Basic Navbar

import { Navbar } from "@/components/ui/navbar"
import { Button } from "@/components/ui/button"

const navItems = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Services", href: "/services" },
  { label: "Contact", href: "/contact" },
]

export function NavbarDemo() {
  return (
    <Navbar
      logo={<div className="font-bold text-xl">Brand</div>}
      items={navItems}
      actions={
        <div className="flex gap-2">
          <Button variant="ghost">Login</Button>
          <Button>Sign Up</Button>
        </div>
      }
    />
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

Interactive component preview