Search Navigation Bar – AI-powered UI element. Smart, adaptive search bar that personalizes navigation with AI assistance. Ideal for dashboards, web apps, and modern SaaS interfaces.
I've created a fully reusable Adaptive Navigation component with advanced animations and interactive features:
Key Features: Advanced Animations: Smooth slide-up entrance, fade-in effects, shimmer loading bar, and mouse-tracking gradient Responsive Design: Adapts seamlessly from mobile to desktop with proper spacing and sizing Theme Support: Full light/dark mode support using shadcn theme variables Interactive Elements: Hover effects, active states, and smooth transitions on all buttons Customizable Props: Title, subtitle, placeholder, callbacks, and visual variants Glassmorphism UI: Modern frosted glass effect with backdrop blur and gradient borders
"use client"
import { AdaptiveNavigation } from "@/components/ui/search-navigation-bar"
import { useState } from "react"
export default function AdaptiveNavigationDemo() {
const [searchQuery, setSearchQuery] = useState("")
const handleSearch = (query: string) => {
setSearchQuery(query)
console.log("Search query:", query)
}
const handleHomeClick = () => {
console.log("Home clicked")
}
const handleAppsClick = () => {
console.log("Apps clicked")
}
const handleProfileClick = () => {
console.log("Profile clicked")
}
return (
<AdaptiveNavigation
title="AI-Powered Adaptive Navigation"
subtitle="Experience intelligent search with real-time suggestions"
placeholder="Ask Rubi"
onSearch={handleSearch}
onHomeClick={handleHomeClick}
onAppsClick={handleAppsClick}
onProfileClick={handleProfileClick}
showLeftIcon={true}
showRightIcons={true}
variant="navigation"
accentColor="from-purple-400 via-pink-400 to-yellow-300"
/>
)
}