Footer Nav
HTML
<ul class="nav--footer">
<li><a class="icon icon--facebook" href="#">
<span class="icon__text">Facebook</span>
</a></li>
<li><a class="icon icon--twitter" href="#">
<span class="icon__text">Twitter</span>
</a></li>
<li><a class="icon icon--linkedin" href="#">
<span class="icon__text">LinkeIn</span>
</a></li>
<li><a class="icon icon--google-plus" href="#">
<span class="icon__text">Google+</span>
</a></li>
<li><a class="icon icon--pinterest" href="#">
<span class="icon__text">Pinterest</span>
</a></li>
<li><a class="icon icon--instagram" href="#">
<span class="icon__text">Instagram</span>
</a></li>
</ul>
Portfolio Nav
HTML
<div class="nav nav--category">
<ul class="nav-list">
<li><a href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter="app">Apps</a></li>
<li><a href="#" data-filter="brand">Brands</a></li>
<li><a href="#" data-filter="print">Print</a></li>
<li><a href="#" data-filter="website">Websites</a></li>
</ul>
</div>
Portfolio Prevnext
HTML
<div class="nav nav--prevnext">
1 / 37 projects
<ul class="nav-list">
<li><a class="nav--prevnext__prev icon icon--leftarrow" href="#" ><span class="icon__text">Previous</span></a></li>
<li><a class="nav--prevnext__next icon icon--rightarrow" href="#" ><span class="icon__text">Next</span></a></li>
</ul>
</div>
Primary Nav
HTML
<nav id="nav" class="nav nav--main">
<ul class="nav-list">
<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
</ul>
</nav><!--end .nav-->