Breadcrumb 麵包屑

水平位置路徑。前面的項目是連結，最後一項是目前頁面，不是連結。

分隔符是 chevron，不是斜線。字級 sm / md / lg 為 13 / 14 / 15px。

示範

基本

最後一項為 aria-current="page"。分隔符對輔助科技隱藏。

首頁產品Breadcrumb

<gk-breadcrumb>
  <gk-breadcrumb-item href="/">首頁</gk-breadcrumb-item>
  <gk-breadcrumb-item href="/products">產品</gk-breadcrumb-item>
  <gk-breadcrumb-item>Breadcrumb</gk-breadcrumb-item>
</gk-breadcrumb>

連結與 select

有 href 的項目是一般連結，不發出 select。沒有 href 時是按鈕，並發出 select，detail 為 { key, item }。

首頁元件庫目前頁

<gk-breadcrumb>
  <gk-breadcrumb-item href="/">首頁</gk-breadcrumb-item>
  <gk-breadcrumb-item key="library">元件庫</gk-breadcrumb-item>
  <gk-breadcrumb-item>目前頁</gk-breadcrumb-item>
</gk-breadcrumb>

自訂分隔符

separator 插槽會取代 chevron。separator 設成其他字串時，則以文字繪製。

·組織團隊成員

<gk-breadcrumb>
  <span slot="separator">·</span>
  <gk-breadcrumb-item href="#org">組織</gk-breadcrumb-item>
  <gk-breadcrumb-item>團隊</gk-breadcrumb-item>
</gk-breadcrumb>

尺寸

sm 13px、md 14px（預設）、lg 15px。lg 的 chevron 略大。

首頁設定帳戶首頁設定帳戶首頁設定帳戶

<gk-breadcrumb size="sm">...</gk-breadcrumb>
<gk-breadcrumb size="md">...</gk-breadcrumb>
<gk-breadcrumb size="lg">...</gk-breadcrumb>

長路徑換行

路徑會換行，分隔符跟著前一項。以 max-items 折疊中間項目是後續項目，v1 尚未實作。

組織亞太區台灣台北辦公室專案gk-ui Wave 5

<gk-breadcrumb>
  <gk-breadcrumb-item href="#a">組織</gk-breadcrumb-item>
  <gk-breadcrumb-item href="#b">亞太區</gk-breadcrumb-item>
  <gk-breadcrumb-item>gk-ui Wave 5</gk-breadcrumb-item>
</gk-breadcrumb>

頁首

麵包屑放在頁面標題上方，作為位置路徑。

控制台訂單#ORD-20481

訂單詳情

麵包屑置於頁面標題上方，作為位置路徑。

<gk-breadcrumb>
  <gk-breadcrumb-item href="#console">控制台</gk-breadcrumb-item>
  <gk-breadcrumb-item href="#orders">訂單</gk-breadcrumb-item>
  <gk-breadcrumb-item>#ORD-20481</gk-breadcrumb-item>
</gk-breadcrumb>

Alpine

<gk-breadcrumb>
  <gk-breadcrumb-item href="/">首頁</gk-breadcrumb-item>
  <gk-breadcrumb-item>目前頁</gk-breadcrumb-item>
</gk-breadcrumb>

API

Breadcrumb 屬性

屬性	型別	預設
separator	string	'chevron'
size	'sm' | 'md' | 'lg'	'md'
items	{ label, href?, key?, disabled? }[]	—

有插槽的 gk-breadcrumb-item 時，優先於 items。separator="chevron" 畫圖示；其他字串當文字。separator 插槽優先於兩者。

v1 沒有 max-items 折疊。

項目屬性

屬性	型別	預設
href	string	''
key	string	''
disabled	boolean	false

插槽

名稱	說明
default	gk-breadcrumb-item，或項目文字
separator	自訂分隔節點，會複製到項目之間

事件

名稱	Detail
select	沒有 href 的項目被啟動時為 { key, item }。有連結的項目交給瀏覽器，不發 select。

CSS parts

root、list、item（資料 API）、link、separator、current。

無障礙

• 根節點是 nav。名稱依文件語言：「Breadcrumb」或「麵包屑」。可在宿主上用 aria-label 覆寫。
• 插槽路徑使用 role="list"。資料 API 渲染 ol。
• 目前頁有 aria-current="page"，且不是連結。
• 分隔符為 aria-hidden="true"。
• 先前項目 hover 為品牌色 70% 的底線，焦點環為 --gk-color-focus-ring 的 70%。