MeDo

AI麵包屑導航生成器。

輸入提示詞，幾秒鐘內獲得完整樣式的麵包屑導航元件。MeDo理解您的網站結構，生成簡潔、無障礙的路徑標記 — 隨時可嵌入任意頁面。

麵包屑導航
麵包屑導航

每個多層級網站都需要一個優秀的麵包屑。

麵包屑透過提供一鍵返回層級路徑來降低跳出率 — 無需點擊瀏覽器返回按鈕。它們還向搜尋引擎傳遞頁面深度訊號，有助於提升抓取能力和結構化資料資格。一個構建良好的麵包屑是一個小元件，卻對使用者體驗和SEO都有超出預期的影響。

6 個模板

可以產生的 麵包屑導航 模板

每個模板都是真實的提示詞，而非截圖。複製到任何 AI 編輯器，或在 MeDo 中執行，直接取得 React + Tailwind 程式碼。

BasicSimple Trail

Chevron Trail With a Plain Current Crumb

Three or four levels, chevron separators, last crumb unlinked. The baseline every other variant extends — and the one place to get the semantics right, because the markup is copied everywhere else.

Create a breadcrumb component wrapped in a nav element with aria-label="Breadcrumb", containing an ordered list. Render ancestors as links and the final segment as plain text carrying aria-current="page", never as a link to the page you are already on. Insert chevron separators with a CSS pseudo-element or an aria-hidden span so screen readers do not announce them between every item. Keep the trail on one line at desktop widths and allow it to wrap rather than horizontally scroll below 640px. Style the current crumb with a darker weight, not a different color alone.

在 MeDo 中試試
TruncatingCollapsed Middle

Ellipsis Between First and Last

For trails deeper than four levels. Collapse the middle rather than shrinking the font — an ellipsis that expands is honest, while a 10px crumb is just unreadable.

Create a breadcrumb that collapses when the trail exceeds four levels: show the root, an ellipsis button, the immediate parent and the current page. The ellipsis is a real button with aria-expanded and an accessible label such as "Show 3 hidden levels", and expanding it reveals the hidden crumbs inline rather than in a popover. Keep every level in the DOM at all times so the JSON-LD BreadcrumbList still describes the full path even while the visual trail is collapsed. Below 640px, show only the parent and current page with a back chevron in front of the parent.

在 MeDo 中試試
CommerceProduct Path

Category Trail With a Home Icon

Home icon, category, subcategory, product name. Build it from the category the shopper actually arrived through, not the product's first assigned category, or the trail contradicts the path they just took.

Create an e-commerce breadcrumb: a home icon link with a visually hidden "Home" label, then category and subcategory links, then the product name as the current crumb with aria-current="page". Truncate the product name with an ellipsis past 40 characters while keeping the full name in the title attribute and in the JSON-LD BreadcrumbList. Derive the category path from the collection the shopper navigated through rather than the product default, so the trail matches their route. Below 640px, collapse to a single back link showing the subcategory name preceded by a left chevron.

在 MeDo 中試試
DropdownSwitchable Crumb

Crumbs That Open a Sibling Menu

Each level doubles as a switcher listing its siblings, which turns a trail into a lateral navigation tool. Standard in cloud consoles where the path is organisation, project, environment.

Create a breadcrumb where each segment is a link plus a small chevron button that opens a menu of that level's siblings — switch project, switch environment, switch service. Give each chevron aria-expanded and aria-haspopup="menu", open the menu on Enter, Space or Down arrow, move through items with arrow keys, close on Escape and return focus to the chevron. Keep the segment label itself a plain link so clicking it navigates rather than opening the menu. Add a filter input inside any menu with more than ten siblings. On mobile, render the menu as a bottom sheet.

在 MeDo 中試試
SEOStructured Trail

Trail With JSON-LD BreadcrumbList

The visual trail plus the schema.org markup that makes Google render a path instead of a bare URL in results. Build both from one array, or they drift apart the first time the IA changes.

Create a breadcrumb component that emits both the visual trail and a schema.org BreadcrumbList as JSON-LD in a script type="application/ld+json" block, generated from the same array of segments so the two can never disagree. Each ListItem needs position, name and an absolute item URL — relative URLs are ignored. Include the current page as the final ListItem even though it renders unlinked. Do not include the trail in more than one place on the page, since duplicate BreadcrumbList blocks are treated as conflicting. Render the JSON-LD server-side so crawlers see it without executing JavaScript.

在 MeDo 中試試
ContentEditorial Path

Kicker Trail Above the Headline

A two-level trail styled as a section kicker rather than a UI control: uppercase, small, sitting directly above the headline. It does navigational and editorial work at once.

Create a breadcrumb styled as an editorial kicker sitting directly above an article headline: two levels — vertical then topic — in small uppercase text with wide letter spacing, separated by a thin slash, with the current article omitted from the visible trail since the headline beneath already names it. Keep the article as the final entry in the JSON-LD BreadcrumbList even though it is not rendered. Use nav with aria-label="Breadcrumb" so it is still a navigation landmark rather than decorative type, and keep the same trail on mobile at a reduced size rather than collapsing it.

在 MeDo 中試試

如何自訂你的 麵包屑導航

根據品牌風格選擇分隔符

將預設的「/」替換為人字形圖示、箭頭或自訂字元。這一細微的設計選擇讓麵包屑自然融入您的設計系統，而不是顯得格格不入。

在行動裝置上截斷長路徑

在小螢幕上僅顯示直接父層和當前頁面，將中間段落隱藏在省略號後。這樣既保持了元件的可讀性，也不犧牲桌面端的完整層級。

新增schema.org BreadcrumbList標記

要求MeDo在HTML旁邊包含JSON-LD結構化資料。搜尋引擎使用它直接在搜尋結果頁面中渲染麵包屑，提高深層內容的點擊率。

以視覺區分活躍段

當前頁面的路徑段絕不應看起來像連結。加粗字型、更深的顏色或微妙的背景標籤都能傳達「您在這裡」，無需額外文字。

誰在使用 麵包屑導航 組件

電商商店

商品頁面位於3-4層深處。麵包屑讓購物者可以從商品直接跳回其分類或子分類 — 減少瀏覽會話中的導航挫敗感。

文件網站

具有巢狀章節（指南 > 認證 > OAuth）的文件從麵包屑中獲益頗大。從搜尋到達的讀者能立即了解自己在大型內容樹中的位置。

新聞與編輯網站

巢狀在話題和垂直領域（技術 > AI > 工具）下的文章使用麵包屑展示相關內容類別，鼓勵讀者在讀完一篇文章後繼續探索，而非直接離開。

SaaS幫助中心

巢狀在產品區域（帳單 > 發票 > 下載）下的支援頁面使用麵包屑，讓用戶可以返回分類並找到相鄰答案，而無需回到根目錄搜尋。

不同網站的 麵包屑導航 方案

同一個 麵包屑導航 組件，針對它所在網站的類型作調整。

01 / 06

E-commerce Breadcrumb

Category, subcategory, product, with a home icon at the root. The one detail worth getting right is which category path you render: showing the product's default category when the shopper arrived through a different collection makes the trail lead somewhere they never were.

麵包屑導航 的風格與變體

挑選與頁面其餘部分相襯的變體，然後產生它。

01 / 06

Chevron Breadcrumb

A right chevron between crumbs, the most legible separator at small sizes. Insert it with a pseudo-element or an aria-hidden span so a screen reader does not read "greater than" between every level.

在 React、Next.js、Vue 與 Svelte 中使用 麵包屑導航

React、Next.js、Vue 3、SvelteKit、Astro 或純 HTML —— 同一個 麵包屑導航，六種接入方式。

01 / 06

React Breadcrumb

No state at all, so this stays a plain function component. Take the segments as an array of label and href pairs rather than parsing a path string inside it — URL slugs make poor crumb labels.

src/components/Breadcrumb.tsx

export function Breadcrumb({ items }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center gap-2">
        {items.map((it, i) => (
          <li key={it.href}>
            {i === items.length - 1
              ? <span aria-current="page">{it.label}</span>
              : <a href={it.href}>{it.label}</a>}
          </li>
        ))}
      </ol>
    </nav>
  )
}

如何把 麵包屑導航 加入專案

四個步驟，從挑選 麵包屑導航 模板到推上生產環境。

01~30s

Pick a Breadcrumb Pattern

Count your depth. Three or four levels take the simple trail, deeper needs the collapsing variant, and a console where users switch between siblings needs the dropdown crumbs.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Keep the aria-current and aria-hidden separator clauses — those two are what separate a real breadcrumb from a row of styled links.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "swap the slash for a chevron", "add the JSON-LD block", "collapse the middle past four levels".

04~2min

Mount It in Your Layout

Render it in the page or a nested layout where the ancestor titles are already loaded, above the h1 and below the header. Pass real labels rather than URL slugs, and emit the JSON-LD from the same array.

關於 麵包屑導航 的常見問題

如何用AI建立麵包屑？

開啟MeDo，描述您的網站層級和希望的視覺風格，MeDo將生成生產就緒的麵包屑元件。您可以用繁體中文指定分隔符、圖示、連結顏色以及是否包含結構化資料。

最好的AI麵包屑生成器是什麼？

MeDo專門為從提示詞生成UI元件而構建。與通用AI工具不同，MeDo理解設計約束、無障礙要求和前端規範，因此生成的麵包屑真正可用 — 而不僅僅是語法正確。

MeDo可以生成帶結構化資料（schema.org）的麵包屑嗎？

可以。在提示詞中要求MeDo包含JSON-LD BreadcrumbList標記，它將同時輸出可視化HTML/CSS元件和schema.org腳本塊。這有助於搜尋引擎直接在搜尋結果中顯示麵包屑。

如何讓麵包屑具備無障礙性？

完全無障礙的麵包屑使用<nav aria-label="麵包屑">包裝器、有序列表、最後一項的aria-current="page"以及鍵盤可聚焦連結。MeDo在生成麵包屑元件時預設應用這些模式。

麵包屑中當前頁面應該是連結嗎？

不應該。當前頁面應為純文字，而非連結 — 連結到您已在的頁面是冗餘的，還可能混淆螢幕閱讀器。MeDo將祖先路徑段渲染為連結，最後一段渲染為無連結的視覺區分標籤。

可以為React或Next.js專案生成麵包屑嗎？

可以。MeDo可以生成使用Next.js動態路由模式的React函數元件麵包屑，包括從usePathname或params讀取路徑段。在提示詞中指定您的框架，MeDo將相應調整輸出。

立即用 MeDo 生成你的 麵包屑導航。

試試任何提示詞 — 免費，無需註冊。

免費開始構建查看定價
導覽列

導覽列

描述您的網站，獲得完全響應式導覽列 — 包含Logo、導覽連結、下拉選單和行動裝置漢堡選單 — 從一個提示詞生成。無需範本，無需繁瑣調整。

相關元件
頁首

頁首

描述您頁面的頂部，MeDo就會建構整條橫帶 — Logo與品牌標誌組合、置於其上方的選用公告列、帶毛玻璃模糊的置頂捲動行為，以及CTA。導覽連結就住在裡面；頁首是把它們框起來的一切。

相關元件
側邊欄

側邊欄

描述您需要的側邊欄 — 導航連結、巢狀選單、過濾器或小工具 — MeDo在幾秒內生成乾淨的、可投入生產的程式碼。無需腳手架，無需樣板程式碼。

相關元件