Menu
Horizontal, vertical, and tree types of menus.
For information on JavaScript-powered drop-down menus, consult the Foundation documentation.
A basic menu
ul.menu
A vertical menu
ul.menu.vertical
A vertical tree menu
ul.tree.vertical
Menu HTML
<p>For information on JavaScript-powered drop-down menus, <a href="http://foundation.zurb.com/sites/docs/dropdown-menu.html">consult the Foundation documentation</a>.</p>
<h3 id="a-basic-menu">A basic menu</h3>
<p><code class="highlighter-rouge">ul.menu</code></p>
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a class="active" href="#">Item 2 (active)</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<h3 id="a-vertical-menu">A vertical menu</h3>
<p><code class="highlighter-rouge">ul.menu.vertical</code></p>
<ul class="menu vertical">
<li><a href="#">Item 1</a></li>
<li><a class="active" href="#">Item 2 (active)</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<h3 id="a-vertical-tree-menu">A vertical tree menu</h3>
<p><code class="highlighter-rouge">ul.tree.vertical</code></p>
<ul class="tree vertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Sub-parent</a>
<ul class="tree vertical">
<li><a href="#">Child 1</a></li>
<li><a class="active" href="#">Child 2 (active)</a></li>
<li><a href="#">Child 3</a></li>
<li><a href="#">Child 4</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
Menu Style
You can find the original source of the CSS as .scss
Menu
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.