Breadcrumb パンくずリスト

現在のページが階層の中のどこに位置するかを示すパスです。カスタム区切り文字、長いパスの折りたたみ、リンク遷移をサポートします。

パンくずリスト

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhBreadcrumb>
      <LhBreadcrumbItem>ホーム</LhBreadcrumbItem>
      <LhBreadcrumbItem>宋代絵画</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'">範寛</LhBreadcrumbItem>
      <LhBreadcrumbItem>溪山行旅図</LhBreadcrumbItem>
    </LhBreadcrumb>
    <LhBreadcrumb separator="/">
      <LhBreadcrumbItem>ホーム</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'" replace>山水巻</LhBreadcrumbItem>
      <LhBreadcrumbItem>現在のページ</LhBreadcrumbItem>
    </LhBreadcrumb>
    <p class="demo-note">maxItems で長いパスを折りたたみ（先頭項目 + 省略記号 + 末尾項目）</p>
    <LhBreadcrumb :max-items="3">
      <LhBreadcrumbItem>ホーム</LhBreadcrumbItem>
      <LhBreadcrumbItem>館蔵</LhBreadcrumbItem>
      <LhBreadcrumbItem>宋代</LhBreadcrumbItem>
      <LhBreadcrumbItem>範寛</LhBreadcrumbItem>
      <LhBreadcrumbItem>溪山行旅図</LhBreadcrumbItem>
    </LhBreadcrumb>
  </div>
</template>

Breadcrumb Props

プロパティ	説明	型	デフォルト値
separator	区切り文字	string	—
maxItems	表示する最大項目数（先頭項目 + 省略記号 + 末尾のいくつかの項目）。超過分は折りたたまれる。0 または省略で折りたたまない	number	—
sx	sx によるレイアウト省略記法	—	—

BreadcrumbItem Props

プロパティ	説明	型	デフォルト値
to	遷移先のアドレス。存在し末尾でない項目はリンクとしてレンダリング（vue-router を検出した場合はルータ遷移、それ以外はネイティブな遷移）	string	—
replace	vue-router で遷移するときに replace 方式にするかどうか（ルータがない場合は効果なし）	boolean	false

Slots

スロット	説明
BreadcrumbItem default	項目のテキスト
BreadcrumbItem separator	項目ごとの区切り文字（親の separator より優先）