Island Nav

A compact dark pill floating at the top that tightens as you scroll.

Analytics your whole team can fly.

Scroll this panel to see how the navbar behaves.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/island-nav.json

Manual

Install the dependencies

npm install clsx lucide-react motion tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/nav/mobile-menu.tsx

"use client";

import { useEffect, useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import type { NavAction, NavItem } from "@/lib/nav/types";

export interface MobileMenuProps {
  items: NavItem[];
  actions?: NavAction[];
  /** Colors for light or dark navbars. @default "light" */
  tone?: "light" | "dark";
  /** Classes for the toggle button. */
  className?: string;
  /** Classes for the panel, to place it under narrow navbars. */
  panelClassName?: string;
}

/**
 * The compact menu every navbar falls back to on narrow widths: a hamburger that morphs into an X,
 * and a panel with expandable groups and the actions. Escape closes it and returns focus.
 */
export function MobileMenu({ items, actions = [], tone = "light", className, panelClassName }: MobileMenuProps) {
  const id = useId();
  const reduceMotion = useReducedMotion();
  const [open, setOpen] = useState(false);
  const [group, setGroup] = useState<string | null>(null);
  const dark = tone === "dark";

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      setOpen(false);
      document.getElementById(`${id}-toggle`)?.focus();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, id]);

  const line = cn("absolute left-1/2 h-[1.5px] w-4 -translate-x-1/2 rounded-full transition-transform duration-300 motion-reduce:transition-none", dark ? "bg-white" : "bg-[#0b0b0c]");

  return (
    <>
      <button
        id={`${id}-toggle`}
        type="button"
        aria-expanded={open}
        aria-controls={`${id}-panel`}
        aria-label={open ? "Close menu" : "Open menu"}
        onClick={() => setOpen((o) => !o)}
        className={cn("relative grid size-9 shrink-0 cursor-pointer place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring", dark ? "hover:bg-white/10" : "hover:bg-black/5", className)}
      >
        <span aria-hidden="true" className={cn(line, open ? "top-1/2 rotate-45" : "top-[13px]")} />
        <span aria-hidden="true" className={cn(line, open ? "top-1/2 -rotate-45" : "top-[21px]")} />
      </button>
      <AnimatePresence>
        {open ? (
          <motion.div
            id={`${id}-panel`}
            initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, transition: { duration: 0.12 } }}
            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
            className={cn("absolute inset-x-2 top-full z-50 mt-2 origin-top rounded-2xl border p-2 shadow-xl", dark ? "border-white/10 bg-[#111113] text-white" : "border-black/[0.06] bg-white text-[#0b0b0c]", panelClassName)}
          >
            <ul>
              {items.map((item) =>
                item.items?.length ? (
                  <li key={item.label}>
                    <button
                      type="button"
                      aria-expanded={group === item.label}
                      onClick={() => setGroup((g) => (g === item.label ? null : item.label))}
                      className={cn("flex h-11 w-full cursor-pointer items-center justify-between rounded-xl px-3 text-[15px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", dark ? "hover:bg-white/5" : "hover:bg-black/[0.03]")}
                    >
                      {item.label}
                      <ChevronDown className={cn("size-4 opacity-60 transition-transform", group === item.label && "rotate-180")} aria-hidden="true" />
                    </button>
                    <div className={cn("grid transition-[grid-template-rows] duration-300 motion-reduce:transition-none", group === item.label ? "grid-rows-[1fr]" : "grid-rows-[0fr]")}>
                      <ul className="min-h-0 overflow-hidden" inert={group !== item.label}>
                        {item.items.map((link) => (
                          <li key={link.label}>
                            <a href={link.href} className={cn("flex items-center gap-2.5 rounded-lg py-2 pr-3 pl-6 text-[14px] outline-none focus-visible:ring-2 focus-visible:ring-ring", dark ? "text-white/75 hover:text-white" : "text-[#52525b] hover:text-[#0b0b0c]")}>
                              {link.icon ? <span aria-hidden="true" className="opacity-70 [&_svg]:size-4">{link.icon}</span> : null}
                              {link.label}
                            </a>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </li>
                ) : (
                  <li key={item.label}>
                    <a href={item.href ?? "#"} className={cn("flex h-11 items-center rounded-xl px-3 text-[15px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", dark ? "hover:bg-white/5" : "hover:bg-black/[0.03]")}>
                      {item.label}
                    </a>
                  </li>
                ),
              )}
            </ul>
            {actions.length ? (
              <div className={cn("mt-2 grid gap-2 border-t pt-3", dark ? "border-white/10" : "border-black/[0.06]")}>
                {actions.map((a, i) => (
                  <a
                    key={a.label}
                    href={a.href}
                    className={cn(
                      "flex h-11 items-center justify-center rounded-xl text-[14px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
                      i === actions.length - 1 ? (dark ? "bg-white text-[#0b0b0c]" : "bg-[#0b0b0c] text-white") : dark ? "border border-white/15" : "border border-black/10",
                    )}
                  >
                    {a.label}
                  </a>
                ))}
              </div>
            ) : null}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </>
  );
}

lib/nav/types.ts

import type { ReactNode } from "react";

/** A link in a menu or panel. */
export interface NavLink {
  label: string;
  href: string;
  /** A short line under the label in rich menus. */
  description?: string;
  /** An icon shown beside the label in rich menus. */
  icon?: ReactNode;
}

/** A top-level navbar entry: a plain link, or a trigger with links under it. */
export interface NavItem {
  label: string;
  /** Destination when the item is a plain link. */
  href?: string;
  /** Links shown in the item's menu; makes the item a menu trigger. */
  items?: NavLink[];
}

/** A call-to-action button. */
export interface NavAction {
  label: string;
  href: string;
}

lib/nav/use-scroll-state.ts

"use client";

import { useEffect, useState, type RefObject } from "react";

export interface ScrollState {
  /** Scroll offset in px. */
  y: number;
  /** Direction of the last meaningful scroll. */
  direction: "up" | "down";
  /** Share of the scrollable distance covered, 0–1. */
  progress: number;
}

/**
 * Scroll position, direction and progress of the window, or of `container` when given (handy for
 * navbars inside a scrolling panel). Updates once per frame at most.
 */
export function useScrollState(container?: RefObject<HTMLElement | null>, threshold = 4): ScrollState {
  const [state, setState] = useState<ScrollState>({ y: 0, direction: "up", progress: 0 });
  useEffect(() => {
    const el = container?.current ?? null;
    const target: HTMLElement | Window = el ?? window;
    let last = 0;
    let direction: ScrollState["direction"] = "up";
    let frame = 0;
    const read = () => {
      frame = 0;
      const y = el ? el.scrollTop : window.scrollY;
      const max = el ? el.scrollHeight - el.clientHeight : document.documentElement.scrollHeight - window.innerHeight;
      // Small moves keep the last direction; tracked here, not in the updater, which may run twice.
      if (Math.abs(y - last) >= threshold) {
        direction = y > last ? "down" : "up";
        last = y;
      }
      setState({ y, direction, progress: max > 0 ? Math.min(1, y / max) : 0 });
    };
    const onScroll = () => {
      if (!frame) frame = requestAnimationFrame(read);
    };
    target.addEventListener("scroll", onScroll, { passive: true });
    read();
    return () => {
      target.removeEventListener("scroll", onScroll);
      cancelAnimationFrame(frame);
    };
  }, [container, threshold]);
  return state;
}

Copy the source

components/ui/island-nav/island-nav.tsx

"use client";

import { type ReactNode, type RefObject } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { MobileMenu } from "@/lib/nav/mobile-menu";
import type { NavAction, NavItem } from "@/lib/nav/types";
import { useScrollState } from "@/lib/nav/use-scroll-state";

export interface IslandNavProps {
  /** Logo or app icon with a name. */
  brand: ReactNode;
  /** Top-level links. Items with `items` link to their first entry here. */
  items: NavItem[];
  /** The call to action on the right of the island. */
  cta?: NavAction;
  /** Scroll container to watch; the window when left out. */
  scrollContainer?: RefObject<HTMLElement | null>;
  /** Accessible name for the navigation. @default "Main" */
  label?: string;
  /** Classes for the header. */
  className?: string;
}

/**
 * A compact dark pill floating at the top center: brand, links and a bright call to action. Once the
 * page scrolls it tightens and lifts a little. Narrow widths swap the links for a menu.
 */
export function IslandNav({ brand, items, cta, scrollContainer, label = "Main", className }: IslandNavProps) {
  const reduceMotion = useReducedMotion();
  const { y } = useScrollState(scrollContainer);
  const scrolled = y > 12;
  return (
    <header className={cn("@container sticky top-0 z-40 flex justify-center px-3 pt-3", className)}>
      <motion.nav
        aria-label={label}
        className="relative isolate flex items-center gap-1 py-2 pr-2 pl-3 text-white"
        initial={false}
        animate={{ y: scrolled ? 4 : 0 }}
        transition={reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }}
      >
        {/* The island tightens on scroll by insetting its backing, animated as a layout (transform)
            animation. The nav itself keeps its size, so the header's height never changes; animating
            its padding moved the page, and scroll anchoring then wobbled it around the threshold. */}
        <motion.span
          aria-hidden="true"
          layout
          layoutDependency={scrolled}
          className={cn("absolute -z-10 bg-[#0b0b0c] shadow-[0_12px_30px_-12px_rgb(0_0_0/0.5)] ring-1 ring-white/10", scrolled ? "inset-x-[3px] inset-y-[2px]" : "inset-0")}
          style={{ borderRadius: 18 }}
          transition={reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }}
        />
        <div className="mr-3 flex items-center">{brand}</div>
        <ul className="hidden items-center @md:flex">
          {items.map((item) => (
            <li key={item.label}>
              <a href={item.href ?? item.items?.[0]?.href ?? "#"} className="flex h-8 relative after:absolute after:inset-x-0 after:-inset-y-1 whitespace-nowrap items-center rounded-lg px-3 text-[13px] text-white/70 outline-none transition-colors hover:text-white focus-visible:ring-2 focus-visible:ring-white/60">
                {item.label}
              </a>
            </li>
          ))}
        </ul>
        {cta ? (
          <a href={cta.href} className="ml-2 hidden h-8 relative after:absolute after:inset-x-0 after:-inset-y-1 items-center rounded-[10px] bg-white px-3.5 text-[13px] font-medium text-[#0b0b0c] outline-none transition-transform hover:-translate-y-px focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b0b0c] @md:inline-flex">
            {cta.label}
          </a>
        ) : null}
        <div className="ml-auto @md:hidden">
          <MobileMenu items={items} actions={cta ? [cta] : []} tone="dark" panelClassName="inset-x-auto left-1/2 w-72 -translate-x-1/2" />
        </div>
      </motion.nav>
    </header>
  );
}

Usage

import { IslandNav } from "@/components/ui/island-nav/island-nav";

<IslandNav brand={<Logo />} items={items} cta={{ label: "Get started", href: "/signup" }} />

API reference

Prop	Type	Default	Description
`brand*`	`ReactNode`	–	Logo or app icon with a name.
`items*`	`NavItem[]`	–	Top-level links. Items with `items` link to their first entry here.
`cta`	`NavAction`	–	The call to action on the right of the island.
`scrollContainer`	`RefObject<HTMLElement \| null>`	–	Scroll container to watch; the window when left out.
`label`	`string`	`"Main"`	Accessible name for the navigation.
`className`	`string`	–	Classes for the header.

Pass `scrollContainer` when the navbar lives in a scrolling panel instead of the page.
Entries with `items` link to their first child here; use a navbar with dropdowns if you need menus.
Breakpoints are container queries, so it adapts to its own width, not the viewport's.

Accessibility

A labelled `<nav>` inside a sticky `<header>`; every entry is a real link.
Below the container's md width the links move into a menu button with `aria-expanded`; Escape closes it and returns focus.
Under reduced motion the island tightens at once instead of springing.

Installation#

CLI