Bulmaのパンくずリスト Breadcrumb [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webサイトでは、現在表示されているページがどの階層にいるのかを示す「パンくずリスト」がよく利用されます。

パンくずリストのサンプルイメージ

Bulmaにはこのパンくずリストを実現するためのクラスが用意されています。

今回は、パンくずリストを簡単に実装できるbreadcrumbクラスを紹介します。

パンくずリストとは、ホーム(ルート)ページを起点として、現在のページまでの階層を順に表示するものです。
Webサイトを訪れたユーザーが、現在どこにいるか(どのページを見ているか)を視覚的にわかりやすくする効果があります。
Webページの上部(ヘッダー下)に表示されることが多く、上部の階層へのリンクが貼られています。

ちなみに、パンくずリストの「パンくず」は、童話の「ヘンゼルとグレーテル」で主人公の兄妹が森に入る際に、後で帰り道が分かるように(迷子にならないように)自分たちが通ってきた道に小さく切ったパンのくずを落としていった話が名前の由来になっています。

パンくずリストのスタイルを設定するbreadcrumbクラス

breadcrumbクラスは、パンくずリストに表示するulリスト(順序・番号なしの箇条書きリスト)のコンテナになります。

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

breadcrumbクラスを指定したコンテナ要素(上記の例ではnav要素)内にul ~ liのリストを配置します。
リストの項目はセパレーター文字(上記の例では / )で区切られ、横に展開して表示されます。

上記の例を階層で表示すると、以下のようになります。

パンくずリストの配置(揃え位置)

パンくずリストは、通常左寄せに配置されますが、中央寄せや右寄せにすることもできます。

左寄せ(クラス指定なし)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

中央寄せ(is-centeredクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

右寄せ(is-rightクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

アイコン付きのリストアイテム

パンくずリストのそれぞれのアイテム(項目)には、アイコンを設定することができます。

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

上記の例では、Font Awesomeのアイコンを配置しています。
アイコン要素には、aria-hidden=”true”を指定して、音声読み上げ機能(スクリーンリーダー)を無効にしています。

Font Awesomeのアイコンを利用するには、スタイルの参照が必要になります。

フリーで使用できるFont Awesomeのアイコンは、以下の記事でご紹介しています。

Font Awesome アイコンフォント一覧 [Free (フリー) のみ]
Font Awesomeのアイコンフォントの一覧です。 Free(無償で利用可能)のアイコンのみをリストにまとめました。 F...

パンくずリストの区切り文字(セパレーター)

パンくずリストの区切り文字(セパレーター)は、デフォルトでは「/」になっていますが、別の文字に変更することができます。

区切り文字には、矢印やドットなどがあります。

矢印(has-arrow-separatorクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

箇条書き(has-bullet-separatorクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

ドット(has-dot-separatorクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

右方向(has-succeeds-separatorクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

パンくずリストのサイズ

パンくずリストのサイズは、通常のサイズとは異なる3つのサイズに変更できます。

小サイズ(is-smallクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

中サイズ(is-mediumクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

大サイズ(is-largeクラスを指定)

Bulmaのbreadcrumbクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulma 入門 Tips 一覧