導航
放射環繞選單
中心按鈕展開環繞排列的放射狀選單，依序彈出。
點擊中心的 FAB 主按鈕，子項沿圓弧以 spring 依序彈出、角度自動均分，再點一下反向收回；子項在滑鼠懸停或鍵盤聚焦時顯示朝外的標籤，可透過 radius、arc、startAngle 自訂軌道半徑與展開弧形，適合行動端快速動作或儀表板工具入口。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/radial-orbit-menu.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
96
360
90
0.05
編輯中的呼叫預設屬性
<RadialOrbitMenu/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/radial-orbit-menu.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/radial-orbit-menu 安裝。
使用
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收合並將焦點還給主按鈕；點擊選單外部也會收合 - 使用者系統開啟「減少動態效果」時，子項直接在定位淡入淡出，不做彈跳位移與旋轉