メインコンテンツへスキップ

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—
replaceplus 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'