Smart Navigation
Scroll down slowly...
Keep scrolling down to see the navbar hide. Then scroll back up even just a little bit to see it reveal instantly.
Content Block 1
Content Block 2
Content Block 3
Content Block 4
Content Block 5
Overview
The most common navigation pattern on Awwwards-winning websites. This navigation bar stays out of the user's way while they read by hiding on scroll down, but instantly reappears the moment they scroll back up, offering easy access to navigation without wasting vertical space.
Usage
import { SmartNavbar } from "@/components/creative/smart-navbar"
<SmartNavbar threshold={100} glass={true}>
<div>Logo</div>
<div>Menu Items</div>
</SmartNavbar>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { SmartNavbar } from "@/components/creative/smart-navbar";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { SmartNavbar } from "@/components/creative/smart-navbar";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<SmartNavbar
threshold{10}
glass{true}
container{/* value */}
>
<div>Content goes here</div>
</SmartNavbar>
</div>
);
}