Dashboard
Cards & Widgets
Charts
Forms
UI Elements
Tables
Maps
Mailbox
Pages

Navigation

Navigation share general markup and styles, from the base .nav class to the active and disabled states.

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