Navigation
This pattern contains:
molecules-nav-primary
molecules-nav-settings
HTML
<nav role="navigation">
<ul class="bare-list nav nav-primary">
<li class="nav__item"><a href="#"><i class="fa fa-comments"></i><span>Messages <i class="count c-white bc-comp--light">3</i></span></a></li>
<li class="nav__item"><a href="#"><i class="icon icon-tasks"></i><span>Tasks</span></a></li>
<li class="nav__item"><a href="#"><i class="fa fa-calendar"></i><span>Events</span></a></li>
<li class="nav__item"><a href="#"><i class="icon icon-legal"></i><span>Votes</span></a></li>
<li class="nav__item"><a href="#"><i class="icon icon-pencil"></i><span>Articles</span></a></li>
<li class="nav__item hide-mobile"><a href="#"><i class="icon icon-chat"></i><span>Groups</span></a></li>
</ul>
<ul class="bare-list nav nav-settings">
<li class="nav__item js-open-signin"><a href="#"><i class="icon icon-avatar"></i><span>Firstname Lastname</span></a></li>
<li class="nav__item js-open-settings"><a href="#"><i class="icon icon-word"></i></a></li>
</ul>
</nav>