ナビゲーション
オフキャンバス（Offcanvas）
http://foundation.zurb.com/docs/components/offcanvas.html
オフキャンバス(Offcanvas)は、文字や画像をクリックすると本文エリアがズレて、隠れているメニューが表示されるタイプのメニューです。
比較的簡単に実装可能です。
Menu
Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
</script>
↓結果(Menuをクリックしてみてください)
Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.
さて、Offcanvasを使いたいシーンというと、スマホ対応の際だと思うのですが、公式には具体例は載っていません。
以下のように記述すれば、smallの際にだけ表示することが可能です。
（ここに、上記ソースの実行結果が埋め込まれています。ブラウザの幅を狭めてみてください）
簡単に解説すると、.show-for-smallの箇所が、smallサイズの時だけ表示せよという項目です。表示／非表示クラスで解説していますので、詳しくはそちらをご覧ください。
.tab-barは、黒い帯を表示します。黒帯が要らないという場合は、.tab-barを消してください。その場合は、.left-off-canvas-toggle.menu-iconの中にあるspanの中の文字（もしくは画像）がトグルのキーになります。
なお、注意点ですが、このメニューは設置されるカラムの高さに依存するようですので、十分な高さがないカラム内に設置すると、メニューの下のほうが表示されなくなりますのでご注意ください。
注意
PCでトグルをクリックすると動作するのに、タブレットなどでトグルをタップすると動作しない場合があります。
その場合は、<a class="left-off-canvas-toggle menu-icon">のhrefに"#off-canvas-navigation"を追加して、
<a class="left-off-canvas-toggle menu-icon" href="#off-canvas-navigation">
として試してみてください。
ページネーション
http://foundation.zurb.com/docs/components/pagination.html
ul.paginationでページネーションを指定できます。
左右の«、»の箇所は、li.arrowを指定します。
現在位置をli.currentで指定するとブルーの背景が付きます。
また、クリッカブルを外したい場合、li.unavailableで外すことができます。
そもそもリンクがないのであればaタグ自体を外せばいいのではないかと思うかもしれませんが、aタグを外すと文字色が黒になりますので、表示を統一したいのであれば、aタグをかけたままでli.unavailableを用意したほうが良いかと思います。
ページネーション自体をセンタリングさせたい場合は、全体をdiv.pagination-centeredで囲みます。
↓結果
サイドナビゲーション
http://foundation.zurb.com/docs/components/side-nav.html
サイドナビゲーションは、全体をul.side-navで囲み、現在地などアクティブ表示をli.active、区切り線をli.dividerとします。
↓結果
サブナビゲーション
http://foundation.zurb.com/docs/components/sub-nav.html
タブ的な扱いができる表示になります。
サブナビは全体をdl.sub-navで囲み、見出しをdt、各項目をddで指定します。また、dd.activeを指定するとブルー背景になり、強調されます。
↓結果
トップバー
http://foundation.zurb.com/docs/components/top-bar.html
トップバーは主にページ上部(とは限りませんが)に表示されるナビゲーションバーです。このページにも一番上に黒帯で表示されています。
全体は、nav.top-barで囲みます。
デフォルトでは黒背景にaタグで囲んだ部分は白文字、aタグがない部分はグレー文字になります。
ヘッダ内には
- 見出し（左位置固定アイテム：class名がtitle-area）
- 普通のメニュー（liの中に記述）
- 下層メニューがアコーディオンで表示されるリンク
- 検索窓
- ボタン
- 右位置固定
が配置できます。
見出し
サイトのタイトルやロゴを配置することが前提のものが多いと思いますが、Boldがかかったものになります。
ここでの記述は
となります。Menuはブラウザの幅が狭くなった時に表示されます。
表示幅
<nav>全体をdiv.contain-to-gridで囲むと本文カラムと同じ幅の範囲内で表示されます。
普通のメニュー（階層なし）
上記タイトルエリア以外は、
section.top-bar-section内に記述します。
さらに後述しますが、左寄せ、右寄せが可能なので、左寄せの場合はul.left、右寄せの場合はul.rightの中に記述します。
つまり全体的には
という構造になります。
下層がない普通のメニューはul内に li a を記述します。
さらに、メニューとメニューの仕切り棒「｜」を表示したい場合はli.dividerを入れます。
このli.dividerは、次の「下層メニューあり」の場合、間に挿入すると、横の区切り線になります。
下層メニューありのリンク
下層（hoverで下部にメニューが表示される）がある場合は、ul liを入れ子にします。
さらに、下層があるliにhas-dropdownクラスを付与することで▼の記号が自動的に表示されます。
（has-dropdownがないとメニューが展開されません。）
この▼をオンマウスしたときに下層メニューを開くようにしたい場合は、上層をli.not-clickとします。
また、下層側のトップのulにdropdownクラスを付けないとメニューが縦一列に並んでくれません。
右位置固定
ul.rightでヘッダーバーの右側にメニューを固定して表示させることができます。
表示位置固定
ページをスクロールさせてもヘッダが付いてくるように指定できます。
div.stickyでnavを囲む形になります。また、表示幅によって固定させるかどうかを指定する場合はdataoptionに"sticky_on:large"のようにサイズを指定します。
<div class="contain-to-grid sticky">
</div>
そして、foundation.jsと、foundation.topbar.jsを読み込みます。
JSの読み込み位置は、</body>直上になります。head内では動作しません。
<body>
...
</body>
以上をまとめたサンプルです。
↓結果
パンくずリスト
http://foundation.zurb.com/docs/components/breadcrumbs.html
パンくずリストには２通りの書き方があります。
ul.breadcrumbsとnav.breadcrumbsです。
ulの場合は各項目をliで、navの場合はaタグで指定します。
どちらの場合も、クリッカブルなしは、.unavailable、カレント表示（文字色が黒）は.currentを指定します。
↓結果