Navigation

Some handy navigation styles - by default menu is horizontally left aligned!





<ul class="nav">
    <li class="nav-item"><a href="#" class="nav-link">Documentation</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Modules</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Helper</a></li>
    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
Navigation right aligned


<ul class="nav nav-right">
    <li class="nav-item"><a href="#" class="nav-link">Documentation</a></li>
    <li class="nav-item active"><a href="#" class="nav-link">Active menu</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Helper</a></li>
    <li class="nav-item"><a href="#" class="nav-link dimmed">About</a></li>
</ul>
Navigation centered aligned
<ul class="nav nav-center">
    <li class="nav-item"><a href="#" class="nav-link">Documentation</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Modules</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Helper</a></li>
    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
Navigation primary


<ul class="nav nav-primary">
    <li class="nav-item"><a href="#" class="nav-link">Documentation</a></li>
    <li class="nav-item active"><a href="#" class="nav-link">Modules</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Helper</a></li>
    <li class="nav-item"><a href="#" class="nav-link dimmed">About</a></li>
</ul>
Navigation primary centered
<ul class="nav nav-primary nav-center">
    <li class="nav-item"><a href="#" class="nav-link">Documentation</a></li>
    <li class="nav-item active"><a href="#" class="nav-link">Modules</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Helper</a></li>
    <li class="nav-item"><a href="#" class="nav-link dimmed">About</a></li>
    <li class="nav-item"><a href="#" class="nav-link nav-link-danger">Sign in</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Menu item</a></li>
    <li class="nav-item"><a href="#" class="nav-link nav-link-tertiary">Create new account</a></li>
</ul>
Navigation primary vertically centered
<ul class="nav nav-primary nav-vertical">
    <li class="nav-item"><a href="#" class="nav-link">Documentation</a></li>
    <li class="nav-item active"><a href="#" class="nav-link">Modules</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Helper</a></li>
    <li class="nav-item"><a href="#" class="nav-link dimmed">About</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Sign in</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Menu item</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Create new account</a></li>
</ul>
SASS

Reference from _nav.scss

$nav-border-radius: rem(2);
$nav-link-color: map-get($colors, link);
$nav-dimmed-link-color: map-get($colors, black);
$nav-active-link-color: map-get($colors, primary);
$nav-spacing: rem(13);
$nav-primary-color: map-get($colors, primary);