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 -->
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 -->
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 -->
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 -->
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 -->
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 -->