サイドナビゲーションは、<ul class="side-nav"> で作成します：
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
結果：
Try it Yourself »どのページにいるかを知らせるために、<li> に .active クラスを追加し、
横向きのボーダーでリンクを分割するために、.divider クラスを使いします：
<ul class="side-nav">
<li class="active"><a class="a" href="#">Link
1</a></li>
<li><a class="a" href="#">Link 2</a></li>
<li
class="divider"></li>
<li><a class="a" href="#">Link 3</a></li>
<li><a class="a" href="#">Link 4</a></li>
</ul>
結果：
Try it Yourself »サイドナビゲーションは、その親要素の幅全体に広がります。一定の幅を使用するには、グリッド内にそれを入れます：
<div class="row">
<div class="medium-4 columns"
style="background-color:#f1f1f1;">
<ul class="side-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
...
</ul>
</div>
<div class="medium-8 columns">
<h1>Side Nav</h1>
<p>Some text..</p>
...
</div>
</div>
結果：
In this example we have put the side nav in a grid and we gave it a gray background color.
注: On smaller screens, the side nav will now stack horizontally, due to the grid (100% width).
Try to re-size the browser window to see the effect.
This behavior can be changed with javascript or media queries.