Basic Navigation

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

Source Code

<div class="pd-10 bd rounded">
  <ul class="nav nav-gray-600 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-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 -->

Default Pills Navigation

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

Source Code

<div class="pd-10 bd rounded">
  <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 bd rounded">
  <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 rounded">
  <ul class="nav nav-pills flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->

Class Reference

Class	Value
class="pd-10 bg-[value] rounded"	primary | success | warning | danger | info | teal | indigo | purple | pink | dark

Gradient Bar Variations

A navigation with gradient color bar that wrapped the navigation.

Source Code

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

Class Reference

Class	Value
class="pd-10 bg-[value] rounded"	mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

Outline Navigation

Below is a type of navigation that have a line at the bottom of active link.

Source Code

<div class="pd-10 bg-gray-200 rounded">
  <ul class="nav nav-outline flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->

<div class="pd-10 bg-dark rounded">
  <ul class="nav nav-outline nav-outline-for-dark flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->

Colored Active Outline Navigation

Below is a type of navigation that have a line at the bottom of active link.

Source Code

<div class="pd-10 bg-gray-200 rounded">
  <ul class="nav nav-outline active-info flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->

<div class="pd-10 bg-gray-200 rounded">
  <ul class="nav nav-outline nav-outline-for-dark active-info flex-column flex-md-row" role="tablist">...</ul>
</div><!-- pd-10 -->

Class Reference

Class	Value
class="nav nav-outline active-[value]"	primary | success | warning | danger | info | indigo | orange | purple | teal | pink