Horizontal On Click Effects

Below is an example of different navbar effects.

Vertical On Click Effects

Below is an example of different navbar effects in vertical mode.

Horizontal On Hover Effects

Below is an example of different navbar effects upon hover.

Vertical On Hover Effects

Below is an example of different navbar effects upon hover in vertical mode.

Sample Source Code: Horizontal

<div class="ht-lg-100 bg-gray-200 pd-x-20 d-lg-flex align-items-center justify-content-center">
  <ul class="nav nav-effect nav-effect-1 flex-column flex-lg-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">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Blog</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
</div><!-- ht-65 -->

Sample Source Code: Vertical

<div class="bg-gray-200 pd-30">
  <ul class="nav nav-effect nav-effect-5 tx-uppercase tx-bold tx-spacing-2 flex-column tx-center" role="tablist">
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Blog</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
</div><!-- ht-65 -->

Class Reference

Class	Value
class="nav nav-effect nav-effect-[value]"	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8