Intelligent Navigation

A comprehensive navbar system with multiple high-end variants. Features scroll-aware adaptability, gestural mobile menus, and seamless dropdowns.

Layout/NavigationResponsiveAccessible

Preview

Minimal Navigation

Essence without excess. The standard for high-trust landing pages.
The navbar above is contained within this preview box using position="absolute".

Animated Hover

fluid cursor-following underline.

Mobile First

Built-in touch-friendly drawer menu.

Installation

npm install framer-motion lucide-react clsx tailwind-merge

Copy the source code below into components/ui/navbar.tsx:

components/ui/navbar.tsx

1"use client";
2import React, { useState, useEffect } from "react";
3import { motion, AnimatePresence } from "framer-motion";
4import Link from "next/link";
5import { Menu, X, ChevronDown, User, LogOut } from "lucide-react";
6import { cn } from "@/lib/utils";
7
8// ... (Rest of component code) ...
9// See full source in 'packages/ui/src/components/navbar/navbar.tsx'
10/* 
11   NOTE: For the "Preview" functionality to work as shown on the docs, 
12   ensure you include the 'position' and 'isScrolled' prop logic 
13   added in the latest update.
14*/