Navigation Elements: Nav Bar
Complete with dropdown menus, courtesy of Superfish. Arrows are automatically added to those elements that contain children. On smaller screens, the nav bar is converted to a select menu via the ReSmenu plugin.
<nav class="nav nav--bar js-nav--bar" role="navigation" aria-label="Navigation Bar">
<ul class="nav__list">
<li class="nav-level-0 nav__list--parent nav__list--here">
<a href="http://www.firespring.com/">Nav Item 1</a>
<ul>
<li class="nav-level-1">
<a href="http://www.firespring.com/">Nav Item 1-1</a>
</li>
<li class="nav-level-1 nav__list--parent nav__list--here">
<a href="http://www.firespring.com/">Nav Item 1-2</a>
<ul>
<li class="nav-level-2 nav__list--here"><a href="http://www.firespring.com/">Nav Item 1-2-1</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-2 is really, really long and keeps on going</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-3</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-4</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-5</a></li>
</ul>
</li>
<li class="nav-level-1 nav__list--parent">
<a href="http://www.firespring.com/">Nav Item 1-3</a>
<ul>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-1</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-2</a></li>
<li class="nav-level-2 nav__list--parent">
<a href="http://www.firespring.com/">Nav Item 1-3-3</a>
<ul>
<li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-1</a></li>
<li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-2</a></li>
<li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-3</a></li>
<li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-4</a></li>
<li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-5</a></li>
</ul>
</li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-4</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-5</a></li>
</ul>
</li>
<li class="nav-level-1 nav__list--parent">
<a href="http://www.firespring.com/">Nav Item 1-4</a>
<ul>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-1</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-2</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-3</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-4</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-5</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-level-0">
<a href="http://www.firespring.com/">Nav Item 2</a>
</li>
<li class="nav-level-0 nav__list--parent">
<a href="http://www.firespring.com/">Nav Item 3</a>
<ul>
<li class="nav-level-1 nav__list--parent">
<a href="http://www.firespring.com/">Nav Item 3-1</a>
<ul>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-1</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-2</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-3</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-4</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-5</a></li>
</ul>
</li>
[...]
<li class="nav-level-1 nav__list--parent">
<a href="http://www.firespring.com/">Nav Item 3-5</a>
<ul>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-1</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-2</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-3</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-4</a></li>
<li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-5</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-level-0">
<a href="http://www.firespring.com/">Nav Item 4</a>
</li>
</ul>
</nav>