Navigation

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

• Documentation
• Modules
• Helper
• About

<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

• Documentation
• Active menu
• Helper
• About

<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

• Documentation
• Modules
• Helper
• About

<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

• Documentation
• Modules
• Helper
• About

<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

• Documentation
• Modules
• Helper
• About
• Sign in
• Menu item
• Create new account

<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

• Documentation
• Modules
• Helper
• About
• Sign in
• Menu item
• Create new account

<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: $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);