Recipe

Auto-hiding sticky navigation with Motion for React

Add a sticky navigation with just a few lines of code

Jeroen Reumkens PRO

Auto-hiding sticky navigation

1
import {
2
  useMotionValueEvent,
3
  MotionValue,
4
  motion,
5
  useScroll,
6
} from "motion/react";
7
import type { Variants } from "motion/react";
8
import { useState, useRef } from "react";
9

10
export const App = () => {
11
  const ref = useRef<HTMLDivElement>(null);
12
  const { scrollY } = useScroll({ container: ref });
13
  return (
14
    <div ref={ref} className="h-dvh w-full overflow-auto text-black">
15
      <div className="min-h-[300vh] bg-linear-to-b from-[rgba(255,255,255,.1)] to-[rgba(255,255,255,0)]">
16
        <Nav scrollY={scrollY} />
17
      </div>
18
    </div>
19
  );
20
};
21

22
const Nav = ({ scrollY }: { scrollY: MotionValue<number> }) => {
23
  const [hidden, setHidden] = useState(false);
24
  const lastYRef = useRef(0);
25

26
  useMotionValueEvent(scrollY, "change", (y) => {
27
    const difference = y - lastYRef.current;
28
    if (Math.abs(difference) > 180) {
29
      setHidden(difference > 0);
30
      lastYRef.current = y;
31
    }
32
  });
33

34
  return (
35
    <motion.div
36
      animate={hidden ? "hidden" : "visible"}
37
      initial="visible"
38
      whileHover={hidden ? "peeking" : "visible"}
39
      onFocusCapture={hidden ? () => setHidden(false) : undefined}
40
      variants={
41
        {
42
          visible: { y: "0%" },
43
          hidden: { y: "-90%" },
44
          peeking: { y: "0%", cursor: "pointer" },
45
        } as Variants
46
      }
47
      transition={{ duration: 0.2 }}
48
      className="sticky top-0 z-10 flex w-full justify-center pt-3"
49
    >
50
      <nav className="flex justify-between gap-3 rounded-3xl bg-white p-2 *:rounded-xl *:border *:border-[#ccc] *:px-3 *:py-1 *:transition-colors *:duration-300 *:hover:bg-[#ccc] *:focus-visible:bg-[#ccc]">
51
        <a href="#" className="bg-[#ccc]">
52
          <svg
53
            className="h-6 w-6"
54
            fill="currentColor"
55
            viewBox="0 0 24 24"
56
            xmlns="http://www.w3.org/2000/svg"
57
          >
58
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5z"></path>
59
          </svg>
60
          <span className="sr-only">Home</span>
61
        </a>
62
        <a href="#">Products</a>
63
        <a className="md:hidden" href="#">
64
          ...
65
        </a>
66
        <a className="max-md:hidden" href="#">
67
          Services
68
        </a>
69
        <a className="max-md:hidden" href="#">
70
          About
71
        </a>
72
        <a className="max-md:hidden" href="#">
73
          Contact
74
        </a>
75
      </nav>
76
    </motion.div>
77
  );
78
};

With CSS position sticky, making a sticky navigation has become super easy. But what if you want to hide the navigation when the user scrolls down and show it when the user scrolls up? This is a common pattern that is actually a little bit harder to achieve.

In this recipe we’re using Framer Motion’s useScroll hook to get the current scroll position, and toggle the state of the navigation based on the scroll direction.

Watch the tutorial linked at the top of this recipe if you want to see how it’s done step by step.