zurb-foundation-5
Version:
Foundation 5 for npm (no code modification from original repo)
60 lines (53 loc) • 1.99 kB
HTML
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Top Bar Title</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="active"><a href="#">Main Item 1</a></li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#">Main Item 2</a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
<ul class="dropdown">
<li><label>Dropdown Level 2 Label</label></li>
<li><a href="#">Dropdown Level 2a</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2b</a>
<ul class="dropdown">
<li><label>Dropdown Level 3 Label</label></li>
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li class="divider"></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">Main Item 3</a>
<ul class="dropdown">
<li><label>Dropdown Level 1 Label</label></li>
<li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>