Browse components
Bubble Menu
A pill navbar whose toggle bursts into a cloud of springy bubble links that pop in one after another.
Installation
npx shadcn@latest add @glint-ui/bubble-menuFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/bubble-menu.json
Usage
import { BubbleMenu } from "@/components/ui/bubble-menu";
<BubbleMenu
logo={<span>acme</span>}
items={[
{ label: "Home", href: "/", color: "#3b82f6" },
{ label: "About", href: "/about", color: "#10b981" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, href, color? }. |
| logo | ReactNode | — | Content of the left pill. |
| position | "fixed" | "absolute" | "fixed" | `absolute` renders inside the nearest positioned parent. |
| stagger | number | 0.07 | Seconds between bubbles. |
| tilt | number | 6 | Max resting tilt in degrees. |
| fontSize | number | 34 | Label size in px. |
| defaultOpen | boolean | false | Start open. |
| className | string | — | Extra classes for the root element. |