コンポーネント

Foundationで用意されている構成要素の説明。

パンくずリスト Breadcrumbs

Foundationで用意されているパンくずリスト関連のスタイルの紹介。

パンくずリストの基本

リストタグのulolまたは、nav.breadcrumbsを指定するだけです。
※Bootstrap3では.breadcrumbですが、Foundation5では最後にsが付くのでご注意を。

			<ul class="breadcrumbs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
      </ul>

リストの状態表示用のスタイル

パンくずリストのリストの状態表示用のスタイルとして、現ページを示す用の.currentとリンク無効表示の.unavailableが用意されています。
.currentを指定すると黒のテキストになります。また、リンクを設定してもカーソルが変化せず、下線もでないスタイルになりますがリンク自体は有効です。(Bootstarpの.activeにあたる指定)
.unavailableを指定すると灰色表記になります。こちらはカーソルを乗せるとリンク無効のマークが出ます。但し、リンクを設定している場合実際にはリンク無効にはなら無いので注意して下さい。

下記のデモで実際にカーソルを乗せたり、クリックして挙動を確認してみてください。

      <ul class="breadcrumbs">
        <li><a href="#">Home</a></li>
        <li class="unavailable"><a href="http://www.yahoo.co.jp/">unavailable</a></li>
        <li class="current"><a href="http://www.yahoo.co.jp/">current</a></li>
      </ul>
© 2015 foudation5-guide.com