放射環繞選單
中心按鈕展開環繞排列的放射狀選單，依序彈出。
點擊中心的 FAB 主按鈕，子項沿圓弧以 spring 依序彈出、角度自動均分，再點一下反向收回；子項在滑鼠懸停或鍵盤聚焦時顯示朝外的標籤，可透過 radius、arc、startAngle 自訂軌道半徑與展開弧形，適合行動端快速動作或儀表板工具入口。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
96
360
90
0.05
<RadialOrbitMenu />
安裝
npx shadcn@latest add https://webberui.com/r/radial-orbit-menu.json或在 components.json 設定 registries 後，改用 @webberui/radial-orbit-menu 安裝。
安裝依賴後，從 registry JSON（/r/radial-orbit-menu.json 的 files[0].content）複製 radial-orbit-menu.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { RadialOrbitMenu } from "@/components/ui/radial-orbit-menu";
import { Calendar, Mail, Search } from "lucide-react";
<RadialOrbitMenu
radius={96}
items={[
{ icon: <Mail />, label: "撰寫郵件", onClick: () => console.log("mail") },
{ icon: <Calendar />, label: "新增行程" },
{ icon: <Search />, label: "搜尋" },
]}
/>只展開上半部弧形時，設定 arc 與 startAngle：
<RadialOrbitMenu items={items} radius={110} arc={180} startAngle={0} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | RadialOrbitMenuItem[] | — | 子項清單，每項含 icon（圖示）、label（標籤）、onClick?（點擊回呼） |
radius | number | 96 | 子項中心到主按鈕中心的距離（px） |
arc | number | 360 | 展開的弧形範圍（度），360 為完整圓，小於 360 時首尾子項各佔端點 |
startAngle | number | 90 | 第一個子項的起始角度（度），0 為正右方、90 為正上方，逆時針遞增 |
stagger | number | 0.05 | 子項依序彈出的間隔（秒） |
defaultOpen | boolean | false | 初始是否展開（非受控） |
onOpenChange | (open: boolean) => void | — | 展開狀態改變時的回呼 |
closeOnSelect | boolean | true | 點擊子項後是否自動收合 |
triggerLabel | string | "開啟快速選單" | 主按鈕的無障礙標籤 |
className | string | — | 透傳到最外層容器 |
可及性
- 主按鈕帶
aria-expanded與aria-label，展開狀態對輔助科技可見 - 子項皆為原生
button並帶aria-label，鍵盤 Tab 聚焦時同樣顯示標籤 - 按下
Escape收合並將焦點還給主按鈕；點擊選單外部也會收合 - 使用者系統開啟「減少動態效果」時，子項直接在定位淡入淡出，不做彈跳位移與旋轉