跳到主要內容

Breadcrumb 麵包屑

顯示當前頁面在層級結構中的位置，可向上逐級導覽。

基礎用法​

基礎用法
import { LhBreadcrumb, LhBreadcrumbItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhBreadcrumb>
      <LhBreadcrumbItem to="/">首页</LhBreadcrumbItem>
      <LhBreadcrumbItem to="/components">组件</LhBreadcrumbItem>
      <LhBreadcrumbItem>面包屑</LhBreadcrumbItem>
    </LhBreadcrumb>
  )
}
屬性說明型別可選值預設值
separator分隔符字元string—'/'
maxItems最大可見項數，超出摺疊為「首項 + 省略號 + 末項」number—0（不摺疊）
sx快速版面配置屬性SxProps——
屬性說明型別預設值
to跳轉地址；存在且非末項時渲染為連結string—
replace保留 plus API 相容；React 側原生 <a> 跳轉不受此開關影響booleanfalse
children文案ReactNode—
受控 / 非受控

摺疊狀態為元件內部狀態：點選省略號按鈕即展開全部，無需外部介入。maxItems 傳 0 或不傳表示不摺疊。

子節點限制

children 必須直接是 LhBreadcrumbItem（可用 .map 渲染），不可被自訂元件包裹 —— 父元件靠 Children.toArray 過濾子元素類型來注入索引，包裹會導致索引注入失敗。與 lh-ui-plus 的 collectPaneVnodes 下鑽限制一致。

路由對接

React 生態無全域路由，連結渲染為原生 <a> 直接導覽。接入 React Router 時用 onClick 攔截並呼叫 navigate，或自行渲染 <Link> 代替 to。

無障礙​

根元素為 <nav aria-label>，列表為 <ol>；末項輸出 aria-current="page"，省略號按鈕帶 aria-label（語言包 breadcrumb.more）。

ref​

forwardRef<HTMLElement> —— <nav> 根元素。LhBreadcrumbItem 轉發 HTMLLIElement。

樣式​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/breadcrumb'