Navigation
There are multiple color schemes to choose from.
There are two navigation bars. The .navbar-default, which is intended to serve
as the top bar, and the .navbar-mid-blue which is intended to be the fixed,
lefthand navigation in the dashboard context. Aside from color palette changes,
they are entirely Bootstrap-based.
Make sure that you always make the navbar collapsible if there are more than two navigation items.
.navbar-default
.navbar-mid-blue
Example markup for navigation:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#navbar-default">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#"><img src="/images/logo.png" alt="A10 logo" /></a>
</div>
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">Licenses</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Activities</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img alt="2e52ef263083c77e2a0a24454dc6f369"
class="img-circle img-fixed"
src="http://gravatar.com/avatar/2e52ef263083c77e2a0a24454dc6f369.png"
width="20" />
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Billing Info</a></li>
<li><a href="#">Account Info</a></li>
<li class="divider"></li>
<li>
<a data-method="delete" href="#" rel="nofollow">Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>