Bubble menu
A wide nav bar that unfolds into oversized, tilted destination pills.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type ReactNode,11} from "react";12import { Menu, X } from "lucide-react";13 14export type BubbleMenuItem = {15 id: string;16 label: string;17 href: string;18};19 20export type BubbleMenuProps = Omit<21 HTMLAttributes<HTMLElement>,22 "children" | "onChange" | "title"23> & {24 /** Destinations revealed when the menu opens. */25 items: readonly BubbleMenuItem[];26 /** Brand shown at the start of the bar. */27 brand?: ReactNode;28 /** Destination for the brand link. */