Bubble Menu
浮動圓形泡泡逐一展開的選單，扇形彈出、彈簧節奏、支援連結與回呼。
點主按鈕，選單項目化為圓形泡泡沿扇形逐一彈出，再點一次由外而內收回。方向、扇角、半徑與配色皆可調。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
180
96
0.05
<BubbleMenu />
安裝
npx shadcn@latest add https://webberui.com/r/bubble-menu.json或在 components.json 設定 registries 後，改用 @webberui/bubble-menu 安裝。
安裝依賴後，從 registry JSON（/r/bubble-menu.json 的 files[0].content）複製 bubble-menu.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { BubbleMenu } from "@/components/ui/bubble-menu";
import { Home, Search, Settings } from "lucide-react";
<BubbleMenu
direction="up"
items={[
{ label: "Home", icon: Home, href: "/" },
{ label: "Search", icon: Search, onClick: () => console.log("search") },
{ label: "Settings", icon: Settings, color: "hsl(280 65% 60%)" },
]}
/>;每個項目至少要有 label 與 icon。給 href 會渲染成連結，或改用 onClick 綁定行為；兩者擇一即可。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | BubbleMenuItem[] | — | 選單項目，逐一從主按鈕彈出 |
direction | "up" | "down" | "left" | "right" | "up" | 泡泡展開方向 |
spread | number | 180 | 扇形總角度（度） |
radius | number | 96 | 泡泡距主按鈕中心的半徑（px） |
size | number | 56 | 主按鈕直徑（px） |
itemSize | number | 46 | 子泡泡直徑（px） |
stagger | number | 0.05 | 每顆泡泡間的彈出間隔（秒） |
color | string | "hsl(221 83% 53%)" | 主色（未被項目 color 覆寫時採用） |
showLabels | boolean | true | 展開時 hover 泡泡顯示文字標籤 |
icon | LucideIcon | Plus | 主按鈕圖示（關閉狀態） |
BubbleMenuItem
| 欄位 | 型別 | 說明 |
|---|---|---|
label | string | 泡泡標籤，同時作為 aria-label |
icon | LucideIcon | lucide-react 圖示元件 |
href | string? | 導向連結；有值時渲染為 a |
onClick | () => void | 點擊回呼；與 href 擇一 |
color | string? | 單獨覆寫此泡泡顏色 |
可及性
- 主按鈕帶
aria-expanded與中文aria-label，切換開闔狀態 - 每顆泡泡帶
aria-label；收合時泡泡層標記aria-hidden - 使用者系統開啟「減少動態效果」時，改用極短的淡入淡出取代彈簧位移