How To Build A Scrollable Navbar

Intro

Building clean and user-friendly software has always been a passion of mine. Recently, while working on my personal website, I noticed that many websites had a sleek navigation bar that smoothly disappears when scrolling down and reappears when scrolling up. Immediately, I knew I wanted to implement this feature.

At first glance, the concept seemed straightforward: use a scroll event listener to track page movement and toggle the navbar’s visibility based on a scroll threshold. However, implementing this in Next.js presented a challenge—many of my pages used server components, which don’t support event listeners. This led me to explore a workaround that would allow me to achieve the same effect while keeping my pages optimized with server components.

Implementation

After experimenting with different approaches, I found a solution that worked well. The key was to create an overlay screen beneath the server components and use it to track scroll movements within a client component. This setup allowed me to observe scroll behavior across the entire page while keeping my content rendered as server components.

I also incorporated Framer Motion for a smoother transition effect when the navbar appears and disappears. The result is a seamless, animated navbar that improves navigation without disrupting the page layout.

Code

"use client";
import React, { useState } from "react";
import { motion, useScroll, useMotionValueEvent } from 'framer-motion';

export const ScrollableNav = () => {
    const { scrollY } = useScroll();
    const [isVisible, setIsVisible] = useState(true);
    useMotionValueEvent(scrollY, "change", (latest) => {
        const previous = scrollY.getPrevious() || 0;
        if (latest > previous && latest > 75) {
            setIsVisible(false);
        } else if (latest < previous) {
            setIsVisible(true);
        }
    });
    const navVariants = {
        visible: { y: 0, opacity: 1, transition: { type: "tween", duration: 0.3 } },
        hidden: { y: "-100%", opacity: 0, transition: { type: "tween", duration: 0.3 } }
    };
    return (
        <motion.nav
            className="fixed top-0 left-0 right-0 bg-white p-4 z-50"
            initial={false}
            animate={isVisible ? "visible" : "hidden"}
            variants={navVariants}
        >
        // ... content here
        </motion.nav>
    )
}

Conclusion

By using a client-side overlay for scroll tracking, I was able to implement a disappearing navbar in Next.js while keeping my content as server components.

If you're working with server components in Next.js and need access to browser events, this approach might come in handy. Let me know if you try it out or have other creative ways to handle scroll-based UI interactions! 🚀