# Responsive React Navbar with Mega Menu, Animated Hamburger and Sticky Shrink on Scroll > Free responsive React navbar in Tailwind: mega menu, dropdown, animated hamburger, sticky bar that shrinks on scroll, active link and full keyboard support. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll). - Page, with a live preview: https://shadcn.exchange/r/weinc/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll - Screenshot: https://shadcn.exchange/shot/weinc/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll/light.png - Registry item: https://we.inc/r/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll.tsx` ```tsx import { useEffect, useId, useRef, useState } from "react"; import type { KeyboardEvent, ReactNode, RefObject } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; /* ---------- Edit the menu here: the desktop bar and the phone menu both read from it ---------- */ type Item = { label: string; text: string; icon: string }; type NavLink = { label: string; href: string; mega?: Item[]; menu?: Item[] }; const brand = "Larkspur"; const ACTIVE = "Pricing"; // the page you are on: gets aria-current="page" const COMPACT_BELOW = 768; // the bar switches to the hamburger below this width (of its own box) const links: NavLink[] = [ { label: "Product", href: "#", mega: [ { label: "Booking pages", text: "One link clients use to pick a free hour.", icon: "M4 5h16v15H4zM4 10h16M9 3v4M15 3v4" }, { label: "Team calendars", text: "See every chair, room and person at once.", icon: "M4 6h16M4 12h16M4 18h10" }, { label: "Reminders", text: "Texts and emails that cut no-shows.", icon: "M6 16V11a6 6 0 1 1 12 0v5l2 2H4zM10 21h4" }, { label: "Payments", text: "Take deposits when the slot is booked.", icon: "M3 7h18v10H3zM3 11h18M7 15h3" }, { label: "Reports", text: "Busy hours, repeat clients, takings.", icon: "M5 20V10M12 20V4M19 20v-7" }, { label: "Integrations", text: "Sync with the calendar you already use.", icon: "M9 7h6v4H9zM12 11v4M6 15h12v5H6z" }, ], }, { label: "Pricing", href: "#" }, { label: "Customers", href: "#" }, { label: "Resources", href: "#", menu: [ { label: "Help centre", text: "Guides for every setting.", icon: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.7M12 17h.01" }, { label: "Changelog", text: "What shipped this month.", icon: "M5 4h14v16H5zM9 9h6M9 13h6" }, { label: "Templates", text: "Ready booking pages by trade.", icon: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" }, ], }, { label: "Docs", href: "#" }, ]; const variants = { light: { name: "Light", bar: "bg-white/95 text-slate-900 border-slate-200", link: "text-slate-600 hover:text-slate-900 hover:bg-slate-100", on: "text-slate-900", dot: "bg-emerald-600", cta: "bg-slate-900 text-white hover:bg-slate-700", ghost: "text-slate-700 hover:bg-slate-100", page: "bg-slate-50", ring: "focus-visible:ring-emerald-600 focus-visible:ring-offset-white" }, dark: { name: "Dark", bar: "bg-[#0d1412]/95 text-white border-white/10", link: "text-slate-300 hover:text-white hover:bg-white/10", on: "text-white", dot: "bg-emerald-400", cta: "bg-emerald-400 text-[#0d1412] hover:bg-emerald-300", ghost: "text-slate-200 hover:bg-white/10", page: "bg-[#0a0f0e]", ring: "focus-visible:ring-emerald-400 focus-visible:ring-offset-[#0d1412]" }, pill: { name: "Floating", bar: "bg-white/95 text-slate-900 border-slate-200", link: "text-slate-600 hover:text-slate-900 hover:bg-slate-100", on: "text-slate-900", dot: "bg-orange-500", cta: "bg-orange-600 text-white hover:bg-orange-700", ghost: "text-slate-700 hover:bg-slate-100", page: "bg-[#f4efe8]", ring: "focus-visible:ring-orange-600 focus-visible:ring-offset-white" }, } as const; type VariantKey = keyof typeof variants; /* ---------- Small hooks ---------- */ /** True once the scroll box (or the window when no ref is given) has moved past `offset`. */ function useScrolled(box?: RefObject, offset = 12) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const el: HTMLElement | Window = box?.current ?? window; const read = () => setScrolled((box?.current ? box.current.scrollTop : window.scrollY) > offset); read(); el.addEventListener("scroll", read, { passive: true }); return () => el.removeEventListener("scroll", read); }, [box, offset]); return scrolled; } /** Width of the navbar's own box, so it is responsive inside any container. */ function useCompact(ref: RefObject) { const [compact, setCompact] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(([e]) => setCompact(e.contentRect.width < COMPACT_BELOW)); ro.observe(el); return () => ro.disconnect(); }, [ref]); return compact; } function Icon({ d, className = "h-5 w-5" }: { d: string; className?: string }) { return ( ); } function Logo({ dot }: { dot: string }) { return ( {brand} ); } /* ---------- The animated hamburger: three bars that fold into an X ---------- */ function Burger({ open, reduce }: { open: boolean; reduce: boolean }) { const t = reduce ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 30 }; return ( ); } /* ---------- The navbar itself ---------- */ type NavbarProps = { variant: VariantKey; scrollBox?: RefObject; startOpen?: string | null; startMobileOpen?: boolean; forceScrolled?: boolean }; export function Navbar({ variant, scrollBox, startOpen = null, startMobileOpen = false, forceScrolled }: NavbarProps) { const v = variants[variant]; const reduce = !!useReducedMotion(); const root = useRef(null); const compact = useCompact(root); const scrolledLive = useScrolled(scrollBox); const scrolled = forceScrolled ?? scrolledLive; const [open, setOpen] = useState(startOpen); const [mobile, setMobile] = useState(startMobileOpen); const [section, setSection] = useState("Product"); const uid = useId(); const burgerRef = useRef(null); const triggers = useRef>({}); const ring = `focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${v.ring}`; const spring = reduce ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }; useEffect(() => setOpen(startOpen), [startOpen]); // Close an open menu once the page has really scrolled (not on the tiny scroll a focus jump can cause). useEffect(() => { const box = scrollBox?.current; const top = () => (box ? box.scrollTop : window.scrollY); let start = top(); const onScroll = () => { if (Math.abs(top() - start) > 48) { setOpen(null); start = top(); } }; const target: HTMLElement | Window = box ?? window; target.addEventListener("scroll", onScroll, { passive: true }); return () => target.removeEventListener("scroll", onScroll); }, [scrollBox, open]); useEffect(() => { const away = (e: PointerEvent) => { if (root.current && !root.current.contains(e.target as Node)) setOpen(null); }; document.addEventListener("pointerdown", away); return () => document.removeEventListener("pointerdown", away); }, []); const onKey = (e: KeyboardEvent) => { if (e.key !== "Escape") return; if (open) { triggers.current[open]?.focus(); setOpen(null); } if (mobile) { setMobile(false); burgerRef.current?.focus(); } }; const openWithArrow = (e: KeyboardEvent, label: string) => { if (e.key !== "ArrowDown") return; e.preventDefault(); setOpen(label); requestAnimationFrame(() => document.getElementById(`${uid}-${label}`)?.querySelector("a")?.focus()); }; const pill = variant === "pill"; const shell = pill ? `mx-auto mt-3 w-[calc(100%-1.5rem)] border ${mobile ? "rounded-3xl" : "rounded-full"} shadow-[0_8px_30px_-12px_rgba(15,23,42,0.25)] ${scrolled ? "max-w-4xl" : "max-w-5xl"}` : `w-full border-b ${scrolled ? "shadow-[0_6px_24px_-14px_rgba(0,0,0,0.35)]" : "border-transparent"}`; return (
{compact && mobile && (
    {links.map((l, i) => { const panel = l.mega ?? l.menu; const expanded = section === l.label; return ( {panel ? ( <> {expanded && ( {panel.slice(0, 4).map((it) => (
  • {it.label}
    • ))}     )}     ) : ( {l.label} {l.label === ACTIVE && )}     ); })}
  • Sign in
)}
); } function Mega({ items, dark, ring, dot }: { items: Item[]; dark: boolean; ring: string; dot: string }) { return ( ); } function List({ items, dark, ring }: { items: Item[]; dark: boolean; ring: string }) { return ( ); } /* ---------- Preview: desktop page on the left, phone with the menu open on the right ---------- */ function FakePage({ dark }: { dark: boolean }) { const line = dark ? "bg-white/10" : "bg-slate-200"; return (

Pricing

One price per chair, every feature included.

{[["Solo", "$19"], ["Studio", "$15"], ["Salon", "$12"]].map(([plan, price]) => (

{plan}

{price} / chair / month

))}
Hairdresser styling a client's hair in a bright salon
); } function Frame({ label, children, className = "" }: { label: string; children: ReactNode; className?: string }) { return (
{label}
{children}
); } export default function ResponsiveReactNavbar() { const [variant, setVariant] = useState("light"); const [demoOpen, setDemoOpen] = useState("Product"); const desk = useRef(null); const reduce = useReducedMotion(); const [touched, setTouched] = useState(false); // any click or key press ends the self-playing demo const dark = variant === "dark"; // Idle demo: show the mega menu, then scroll the page so the bar shrinks. Stops on any input. useEffect(() => { const box = desk.current; if (reduce || touched) return; const t = window.setTimeout(() => { setDemoOpen(null); box?.scrollTo({ top: 160, behavior: "smooth" }); }, 2200); return () => window.clearTimeout(t); }, [reduce, touched]); return (
setTouched(true)} onKeyDownCapture={() => setTouched(true)} className="min-h-[640px] bg-[#eef0ec] px-4 py-8 font-['Inter_Tight','Inter',ui-sans-serif,system-ui] sm:px-8">
{(Object.keys(variants) as VariantKey[]).map((k) => ( ))}
); } ```