Hover Nav

npm install motion

"use client";

import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";

export type NavLink = {
  label: string;
  href: string;
};

type HoverNavProps = {
  links: NavLink[];
  /** href of the current page; it gets aria-current and a dot. */
  current?: string;
  /** Accessible name for the nav landmark. */
  label?: string;
  className?: string;
};

export function HoverNav({ links, current, label = "Main", className = "" }: HoverNavProps) {
  const [hovered, setHovered] = useState<string | null>(null);
  const reduceMotion = useReducedMotion();
  const pillId = useId();

  return (
    <nav aria-label={label} className={className}>
      <ul
        onPointerLeave={() => setHovered(null)}
        className="flex items-center gap-1 rounded-full border border-white/10 bg-[#141B1B]/80 p-1 backdrop-blur"
      >
        {links.map((link) => {
          const isCurrent = link.href === current;
          return (
            <li key={link.href} className="relative">
              {hovered === link.href && (
                <motion.span
                  layoutId={pillId}
                  aria-hidden
                  className="absolute inset-0 rounded-full bg-white/[0.08]"
                  transition={reduceMotion ? { duration: 0 } : { type: "spring", bounce: 0.2, duration: 0.35 }}
                />
              )}
              <a
                href={link.href}
                aria-current={isCurrent ? "page" : undefined}
                // keyboard focus moves the pill too, not just the mouse
                onPointerEnter={() => setHovered(link.href)}
                onFocus={() => setHovered(link.href)}
                onBlur={() => setHovered(null)}
                className={`relative flex items-center gap-1.5 rounded-full px-4 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-[#5FAEB4] ${
                  isCurrent ? "text-[#F6F1E8]" : "text-[#94A9A7] hover:text-[#F6F1E8]"
                }`}
              >
                {isCurrent && <span aria-hidden className="size-1.5 rounded-full bg-[#5FAEB4]" />}
                {link.label}
              </a>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}