階層パスのナビゲーションです。ネイティブの nav + ol セマンティックに基づき、現在のページには自動的に aria-current="page" が付与され、クリックできません。カスタムセパレーターと、はみ出し時の折りたたみをサポートします。

基本的な使い方

vue

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

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>ホーム</LhBreadcrumbItem>
    <LhBreadcrumbItem>コンポーネント</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>ホーム</LhBreadcrumbItem>
    <LhBreadcrumbItem>コンポーネント</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

リンクナビゲーション

vue

<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>

vue

<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 で履歴を置き換えるかどうかを制御）、それ以外の場合はネイティブのナビゲーションを維持します。末尾の項目は常に現在のページのテキストとしてレンダリングされます。

カスタムセパレーター

vue

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

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">ホーム</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">コンポーネント</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      個別セパレーター
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">ホーム</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">コンポーネント</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      個別セパレーター
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

はみ出し時の折りたたみ

vue

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

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">ホーム</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">第 1 階層 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">第 2 階層 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">第 3 階層 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>現在のページ</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">ホーム</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">第 1 階層 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">第 2 階層 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">第 3 階層 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>現在のページ</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

maxItems を超える場合、先頭の項目 + 省略記号 + 末尾のいくつかの項目を残し、省略記号をクリックするとすべて展開されます。

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
  maxItems?: number
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  to?: string
  replace?: boolean
}

Breadcrumb パンくずリスト ​

基本的な使い方 ​

リンクナビゲーション ​

カスタムセパレーター ​

はみ出し時の折りたたみ ​

Breadcrumb API ​

Props ​

LhBreadcrumbItem Props ​

Slots ​

アクセシビリティ ​

型定義 ​

Breadcrumb パンくずリスト