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>
<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>
<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>
<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>
<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>
<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>
Reference from _nav.scss
$nav-border-radius: $global-border-radius !default;
$nav-spacing: rem(13) !default;
--r-nav-border-radius: #{$nav-border-radius};
--r-nav-link-color: var(--r-color-link);
--r-nav-dimmed-link-color: var(--r-color-black-lighten-70);
--r-nav-active-link-color: var(--r-color-primary);
--r-nav-spacing: #{$nav-spacing};
--r-nav-primary-color: var(--r-color-primary);