變形麵包屑
層級切換時項目滑入滑出、當前層放大的動態麵包屑
點擊任一層級即收合其後項目（AnimatePresence 帶模糊滑出），當前層以彈簧微放大並由共享 layoutId 的高亮膠囊「變形」跟隨；路徑過長時中段自動折疊為省略號，點擊可展開，適合檔案管理、文件系統等深層導航場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4
<MorphingBreadcrumbs />
安裝
npx shadcn@latest add https://webberui.com/r/morphing-breadcrumbs.json或在 components.json 設定 registries 後，改用 @webberui/morphing-breadcrumbs 安裝。
安裝依賴後，從 registry JSON（/r/morphing-breadcrumbs.json 的 files[0].content）複製 morphing-breadcrumbs.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { MorphingBreadcrumbs } from "@/components/ui/morphing-breadcrumbs";
<MorphingBreadcrumbs
items={[
{ id: "home", label: "首頁", icon: "🏠" },
{ id: "drive", label: "雲端硬碟" },
{ id: "projects", label: "專案文件" },
{ id: "design", label: "設計稿 v2" },
]}
maxVisible={4}
onNavigate={(item, index) => console.log(item.label, index)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | MorphingBreadcrumbItem[] | — | 完整層級路徑，由淺至深排列 |
onNavigate | (item, index) => void | — | 導航到某一層時觸發 |
maxVisible | number | 4 | 可見層級超過此數量時，中段折疊為省略號（最小 3） |
separator | React.ReactNode | ChevronRight | 自訂層級之間的分隔符 |
ariaLabel | string | "麵包屑" | nav 地標的無障礙名稱 |
className | string | — | 透傳到最外層 nav |
MorphingBreadcrumbItem 欄位：
| 欄位 | 型別 | 說明 |
|---|---|---|
id | string | 唯一識別碼，作為列表與動畫 key |
label | string | 該層級顯示的文字 |
icon | React.ReactNode | 選填的前綴圖示（emoji 或任意節點） |
可及性
- 最外層為
nav地標並帶aria-label，層級以有序清單ol/li呈現 - 當前層級標記
aria-current="page"，點擊為 no-op，不會誤觸導航 - 省略鈕提供
aria-label（含隱藏層級數量），鍵盤可聚焦並有可見 focus ring - 使用者系統開啟「減少動態效果」時，滑入滑出與放大動畫改為瞬間切換，僅保留透明度變化
- 分隔符與裝飾圖示皆為
aria-hidden，不干擾輔助科技朗讀