Breadcrumb 麵包屑

層級路徑導覽。基於原生 nav + ol 語意，目前頁自動標記 aria-current="page" 且不可點選；支援自訂分隔符號與超出折疊。

基礎用法

基礎用法

1. 首頁
2. 元件
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>首页</LhBreadcrumbItem>
    <LhBreadcrumbItem>组件</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>首页</LhBreadcrumbItem>
    <LhBreadcrumbItem>组件</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

連結導覽

連結導覽

1. 首頁
2. 指南
3. 目前頁

replace 模式

1. 替換歷史
2. 目前頁

<script setup lang="ts">
</script>

<template>
  <!-- 連結導覽 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">指南</LhBreadcrumbItem>
    <LhBreadcrumbItem>当前页</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- replace 模式 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>替换历史</LhBreadcrumbItem>
    <LhBreadcrumbItem>当前页</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <!-- 連結導覽 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">指南</LhBreadcrumbItem>
    <LhBreadcrumbItem>当前页</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- replace 模式 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>替换历史</LhBreadcrumbItem>
    <LhBreadcrumbItem>当前页</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

傳入 to 的項繪製為 <a>；偵測到 vue-router 時走路由跳轉（replace 控制是否替換歷史記錄），否則保持原生導覽。末項始終繪製為目前頁文字。

自訂分隔符號

自訂分隔符號

1. 首頁
2. 元件
3. 獨立分隔符號

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">组件</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      独立分隔符
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">组件</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      独立分隔符
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

超出折疊

超出折疊

1. 首頁
2. 一級目錄 A
3. 二級目錄 B
4. 三級目錄 C
5. 目前頁

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">一级目录 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">二级目录 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">三级目录 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>当前页</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">一级目录 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">二级目录 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">三级目录 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>当前页</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

超出 maxItems 時保留首項 + 省略符號 + 末尾若干項；點選省略符號展開全部。

Breadcrumb API

Props

屬性名	說明	類型	預設值
separator	分隔符號字元	string	'/'
maxItems	最大可見項數（首項 + 省略符號 + 末尾若干項），超出折疊	number	0
sx	sx 快速版面配置屬性	LhSxProps	—

LhBreadcrumbItem Props

屬性名	說明	類型	預設值
to	跳轉位址；存在且非末項時繪製為連結	string	—
replace	使用 vue-router 跳轉時是否以 replace 方式	boolean	false

Slots

插槽名	說明	作用元件
default	麵包屑項	LhBreadcrumb
default	項內容	LhBreadcrumbItem
separator	自訂分隔符號（覆寫全域 separator）	LhBreadcrumbItem

無障礙

• 根元素為 <nav aria-label>（取語言包 breadcrumb.label）包 <ol>，語意順序即文件順序
• 目前頁（末項）繪製為文字並自動設定 aria-current="page"，即使傳入 to 也不可點選
• 分隔符號 aria-hidden="true"，不進入無障礙樹
• 折疊省略符號是真實 <button>，aria-label 取語言包 breadcrumb.more，點選展開全部

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/breadcrumb/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  /** 分隔符號字元 */
  separator?: string
  /** 最大可見項數（首項 + 省略符號 + 末尾若干項），超出折疊；0 或不傳表示不折疊 */
  maxItems?: number
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  /** 跳轉位址；存在且非末項時繪製為連結（偵測到 vue-router 時走路由跳轉，否則原生導覽） */
  to?: string
  /** 使用 vue-router 跳轉時是否以 replace 方式（無路由時無效果） */
  replace?: boolean
}