Menu underline on hover

Darken screen onshow

Add darken-onshow class before/after nav-item or dropdown classes. Also, at the same time you can apply hover.
Code example:

<li class="nav-item dropdown darken-onshow">
	<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown </a>
    <ul class="dropdown-menu">
	  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
</li>

Dropdown large

Add dropdown-large class on dropdown-menu element
For example:

<li class="nav-item dropdown">
	<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown </a>
    <ul class="dropdown-menu dropdown-large">
	  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
</li>

Fixed top autohide

Add autohide class on main navbar element.
Code example:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark autohide">
	.... navbar elements
</nav>

Fixed top

Add fixed-onscroll class on main navbar element.
Code example:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-onscroll">
	.... navbar elements
</nav>

Hover animations

Add hover class befoer/after nav-item or dropdown classes. And then add animate fade-down classes on dropdown-menu element
For example:

<li class="nav-item dropdown hover">
	<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown </a>
    <ul class="dropdown-menu animate fade-down">
	  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
</li>

Hover basic

Add hover class before/after nav-item or dropdown classes.
For example:

<li class="nav-item dropdown hover">
	<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown </a>
    <ul class="dropdown-menu">
	  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
</li>

Mega-menu

Add has-megamenu class befoer/after nav-item or dropdown classes. Then add megamenu class on dropdown-menu element.
For example:

<li class="nav-item dropdown has-megamenu">
	<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown </a>
    <div class="dropdown-menu megamenu">
	 This is content of mega-menu... cuper easy to customize for your needs. Like adding columns and inner category links. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</li>

Hover basic

Add hover class befoer/after nav-item or dropdown classes.
For example:

<li class="nav-item dropdown hover">
	<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown </a>
    <ul class="dropdown-menu">
	  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
	  <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
</li>

Mega-submenu

First we need a dropdown menu, then another submenu list inside dropdown's item. So, add has-megasubmenu class on li element of dropdown menu. Now add another list of inner menu with megasubmenu class.
For example:

<li class="nav-item">
	<a class="nav-link" href="#"> Menu item </a>
</li>
<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Menu item  </a>
    <ul class="dropdown-menu">
	  <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 2 </a></li>
	  <li class="has-megasubmenu">
	  	 <a class="dropdown-item" href="#"> Dropdown item 5 <i class="icon-arrow"></i> </a>
	  	 <div class="megasubmenu dropdown-menu">
		    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		    consequat. Duis aute irure dolor in
		 </div>
	  </li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
    </ul>
</li>

Multi-level dropdowns

First we need a dropdown menu inside the dropdown-menu's list item. So, add submenu dropdown-menu class on inner dropdown menu element.
For example:

 
<li class="nav-item"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">  Multilevel click  </a>
    <ul class="dropdown-menu">
	  <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 2 <i class="icon-arrow"></i> </a>
		<ul class="submenu dropdown-menu">
			<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
			<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
			<li><a class="dropdown-item" href="#">Submenu item 3 <i class="icon-arrow"></i> </a>
				<ul class="submenu dropdown-menu">
				    <li><a class="dropdown-item" href="#">Multi level 1</a></li>
				    <li><a class="dropdown-item" href="#">Multi level 2</a></li>
				</ul>
			</li>
			<li><a class="dropdown-item" href="#">Submenu item 4</a></li>
			<li><a class="dropdown-item" href="#">Submenu item 5</a></li>
		</ul>
	  </li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
    </ul>
</li>