變形麵包屑｜免費 React 元件

點擊任一層級即收合其後項目（AnimatePresence 帶模糊滑出），當前層以彈簧微放大並由共享 layoutId 的高亮膠囊「變形」跟隨；路徑過長時中段自動折疊為省略號，點擊可展開，適合檔案管理、文件系統等深層導航場景。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add morphing-breadcrumbs

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

最多可見層級maxVisible

分隔符separator

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<MorphingBreadcrumbs/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/morphing-breadcrumbs.json

或在 components.json 設定 registries 後，改用 @webberui/morphing-breadcrumbs 安裝。

使用

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，不干擾輔助科技朗讀

變形麵包屑

把這個效果裝進你的專案

Playground

安裝

使用

Props

可及性

本頁目錄