Navigation
Basic Navigation

Below is an example of a basic navigation for both light and dark.

Source Code

<div class="pd-10 bd">
  <ul class="nav nav-gray-600 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Features</a></li>
    <!-- more menu here -->
  </ul>
</div><!-- pd-10 -->
Vertical Navigation

Below is an example of a basic navigation in a vertical mode.

Source Code

<div class="pd-10 bd rounded">
  <ul class="nav nav-gray-600 flex-column" role="tablist">...</ul>
</div><!-- pd-10 -->
Pills Navigation

Below is an example of a pill navigation in both light and dark.

Source Code

<div class="pd-10 bd">
  <ul class="nav nav-pills flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->
Vertical Pills Navigation

Below is an example of a pill navigation in vertical mode.

Source Code

<div class="pd-10">
<ul class="nav nav-pills flex-column" role="tablist">...</ul>
</div><!-- pd-10 -->
Horizontal Alignment

A navigation with center and right in which left is the default.

Source Code

<div class="pd-10 bd rounded">
  <ul class="nav nav-pills flex-column flex-md-row justify-content-center" role="tablist">...</ul>
</div><!-- pd-10 -->
<div class="pd-10 bd rounded">
  <ul class="nav nav-pills flex-column flex-md-row justify-content-end" role="tablist">...</ul>
</div><!-- pd-10 -->
Colored Bar Variations

A navigation with colored bar that wrapped the navigation.

Source Code

<div class="pd-10 bg-teal">
  <ul class="nav nav-pills flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->