Lism Tips

パンくずリスト

l--cluster と a--decorator を使って、いまいるページまでの道すじを並べるパンくずリストを作る例です。

パンくずリストは、「トップ ＞ 分類 ＞ いまのページ」のように、いま見ているページがサイトのどこにあるかを示す小さなリンクの列です。Lism では、l--cluster で項目を横に並べ、区切りの記号を挟んで作ります。

使うクラス#

クラス このパンくずでの役目
l--cluster 項目を横に並べ、入りきらなければ折り返す
-g:15 項目と項目のすきま（-g は gap の略）
-d:inline-flex 1つの項目の中で、区切り記号と文字を横に並べる
-ai:center 区切り記号と文字の高さの真ん中をそろえる
-c:inherit リンクの色を、まわりの文字と同じ色にする
a--decorator 区切り記号のような、飾りの要素の目印
-o:pp 区切り記号を薄くする（-o は opacity（不透明度）の略）

記号「/」で区切る#

順番のある並びなので、<ol>（番号付きの一覧）と <li> を使います。2つめからの項目の先頭に、区切りの「/」を置きます。

表示例

  1. ホーム
  2. 分類
  3. いまのページ
html
<ol class="l--cluster -g:15">
  <li class="-d:inline-flex -ai:center -g:15">
    <a class="-c:inherit" href="#">ホーム</a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <div class="a--decorator -o:pp" aria-hidden="true">/</div>
    <a class="-c:inherit" href="#">分類</a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <div class="a--decorator -o:pp" aria-hidden="true">/</div>
    <span>いまのページ</span>
  </li>
</ol>

区切りの記号には aria-hidden="true" を付けます。画面の読み上げソフトが「スラッシュ」と読まなくなります。

矢印のアイコンで区切る#

区切りを「＞」の形のアイコンにすることもできます。アイコンには a--icon を付け、-c:text-2 で少し薄い文字色にします。いまのページの文字も同じ色にすると、リンクとの区別がつきやすくなります。

表示例

  1. ホーム
  2. 分類
  3. いまのページ
html
<ol class="l--cluster -g:15">
  <li class="-d:inline-flex -ai:center -g:15">
    <a class="-c:inherit" href="#">ホーム</a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <svg viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="a--icon -c:text-2" aria-hidden="true"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path></svg>
    <a class="-c:inherit" href="#">分類</a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <svg viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="a--icon -c:text-2" aria-hidden="true"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path></svg>
    <span class="-c:text-2">いまのページ</span>
  </li>
</ol>

React・Astro で書く場合#

<Cluster as="ol"> と <ListItem> で組みます。区切りの記号は <Decorator>、アイコンは <Icon> です。

jsx
<Cluster as="ol" g="15">
  <ListItem d="inline-flex" ai="center" g="15">
    <Link href="#menu-1" c="inherit">ホーム</Link>
  </ListItem>
  <ListItem d="inline-flex" ai="center" g="15">
    <Decorator o="pp">/</Decorator>
    <span>いまのページ</span>
  </ListItem>
</Cluster>

アイコンで区切るときは、@lism-css/icons/react から CaretRightIcon を読み込み、<Icon icon={CaretRightIcon} c="text-2" /> と書きます。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧