Each dropdown has its own classes. Down below are all available classes.
Can also be used as a regular dropdown!
<!-- Default -->
<li class="nav-item dropdown active">
<a href="#" id="navDD1" class="nav-link dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Default
</a>
<div aria-labelledby="navDD1" class="dropdown-menu dropdown-menu-hover">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">
<span class="badge badge-success float-end">new</span>
Option 3
</a>
</li>
<!-- Multilevel -->
<li class="dropdown-item dropdown"><!-- note: childs has .dropdown-link class, only the main has .nav-link -->
<a href="#" class="dropdown-link" data-toggle="dropdown">
Deep Unlimited
</a>
<ul class="dropdown-menu dropdown-menu-hover dropdown-menu-block-md shadow-lg b-0 m-0">
<li class="dropdown-item"><a href="#" class="dropdown-link">Option A</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option B</a></li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">
<span class="badge badge-info float-end">new</span>
Option C
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<!-- Dark -->
<li class="nav-item dropdown active">
<a href="#" id="navDD5" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dark
</a>
<div aria-labelledby="navDD5" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover dropdown-menu-dark bg-gradient-secondary">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item text-warning">
<span class="d-block px-4 pb-3 pt-2 fs--14">
Dark / Color Dropdown
</span>
</li>
<li class="dropdown-divider border-secondary opacity-5"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 4</a></li>
</ul>
</div>
</li>
<!-- Fade Up -->
<li class="nav-item dropdown active">
<a href="#" id="navDD2" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Up
</a>
<div aria-labelledby="navDD2" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover dropdown-fadeinup">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item">
<span class="d-block text-muted px-4 pb-3 pt-2 fs--14">
Animation: Fade Up
</span>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 4</a></li>
</ul>
</div>
</li>
<!-- Fade Down -->
<li class="nav-item dropdown active">
<a href="#" id="navDD3" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Down
</a>
<div aria-labelledby="navDD3" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover dropdown-fadeindown">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item">
<span class="d-block text-muted px-4 pb-3 pt-2 fs--14">
Animation: Fade In Down
</span>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 4</a></li>
</ul>
</div>
</li>
<!-- Bounce -->
<li class="nav-item dropdown active">
<a href="#" id="navDD4" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Bounce
</a>
<div aria-labelledby="navDD4" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover dropdown-bounceinup">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item">
<span class="d-block text-muted px-4 pb-3 pt-2 fs--14">
Animation: Bounce
</span>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 4</a></li>
</ul>
</div>
</li>
<!-- Bullet -->
<li class="nav-item dropdown active">
<a href="#" id="navDD6" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Bullet
</a>
<div aria-labelledby="navDD6" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover prefix-link-icon prefix-icon-dot">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item text-primary">
<span class="d-block px-4 pb-3 pt-2 fs--14">
Bullet Indicator
</span>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item">
<a href="#" class="dropdown-link prefix-icon-ignore">
<i class="fi fi-gps"></i> Icon
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link prefix-icon-ignore">
No Indicator
</a>
</li>
</ul>
</div>
</li>
<!-- Line -->
<li class="nav-item dropdown active">
<a href="#" id="navDD7" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Line
</a>
<div aria-labelledby="navDD7" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover prefix-link-icon prefix-icon-line">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item text-primary">
<span class="d-block px-4 pb-3 pt-2 fs--14">
Line Indicator
</span>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item">
<a href="#" class="dropdown-link prefix-icon-ignore">
<i class="fi fi-gps"></i> Icon
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link prefix-icon-ignore">
No Indicator
</a>
</li>
</ul>
</div>
</li>
<!-- Arrow -->
<li class="nav-item dropdown active">
<a href="#" id="navDD8" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Arrow
</a>
<div aria-labelledby="navDD8" class="dropdown-menu dropdown-menu-clean dropdown-menu-hover prefix-link-icon prefix-icon-arrow">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item text-primary">
<span class="d-block px-4 pb-3 pt-2 fs--14">
Arrow Indicator
</span>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 3</a></li>
<li class="dropdown-item">
<a href="#" class="dropdown-link prefix-icon-ignore">
<i class="fi fi-gps"></i> Icon
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link prefix-icon-ignore">
No Indicator
</a>
</li>
</ul>
</div>
</li>
<!--
Mega 2Col
-->
<li class="nav-item dropdown">
<a href="#" id="navDD13" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
2Col
</a>
<!--
Dropown Classes:
.dropdown-mega-sm { width: 300px; }
.dropdown-mega-md { width: 400px; }
.dropdown-mega-lg { width: 600px; }
.dropdown-mega-xl { width: 700px; }
.dropdown-mega-xxl { width: 800px; }
.dropdown-menu-invert - open dropdown in oposite direction
-->
<div aria-labelledby="navDD13" class="dropdown-menu dropdown-menu-hover dropdown-menu-clean dropdown-menu-invert dropdown-mega-md">
<!--
optional line column separator
.col-border-lg
-->
<div class="row">
<div class="col-12 col-lg-6">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 1
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
<div class="col-12 col-lg-6">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 2
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
</div>
</div>
</li>
<!--
Mega 3Col
-->
<li class="nav-item dropdown">
<a href="#" id="navDD10" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
3Col
</a>
<!--
Dropown Classes:
.dropdown-mega-sm { width: 300px; }
.dropdown-mega-md { width: 400px; }
.dropdown-mega-lg { width: 600px; }
.dropdown-mega-xl { width: 700px; }
.dropdown-mega-xxl { width: 800px; }
.dropdown-menu-invert - open dropdown in oposite direction
-->
<div aria-labelledby="navDD10" class="dropdown-menu dropdown-menu-hover dropdown-menu-clean dropdown-menu-invert dropdown-mega-lg">
<!--
optional line column separator
.col-border-lg
-->
<div class="row">
<div class="col-12 col-lg-4">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 1
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
<div class="col-12 col-lg-4">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 2
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
<div class="col-12 col-lg-4">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 3
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
</div>
</div>
</li>
<!--
Mega 4Col
.dropdown-menu-invert class used
-->
<li class="nav-item dropdown">
<a href="#" id="navDD11" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
4Col
</a>
<div aria-labelledby="navDD11" class="dropdown-menu dropdown-menu-hover dropdown-menu-clean dropdown-menu-invert dropdown-mega-xxl">
<!--
optional line column separator
.col-border-lg
-->
<div class="row">
<div class="col-12 col-lg-3">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 1
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
<div class="col-12 col-lg-3">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 2
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
<div class="col-12 col-lg-3">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 3
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
<div class="col-12 col-lg-3">
<ul class="list-unstyled">
<li class="dropdown-item">
<h3 class="h6 px-3 my-3 text-muted text-uppercase fs--14 mb-3">
Column 4
</h3>
</li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 2</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 3</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 4</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 5</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 6</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Option 7</a></li>
</ul>
</div>
</div>
</div>
</li>
<!--
Full Mega Menu
-->
<li class="nav-item dropdown dropdown-mega">
<a href="#" id="navDD12" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Full
</a>
<div aria-labelledby="navDD12" class="dropdown-menu dropdown-menu-hover dropdown-menu-clean">
<!--
optional line column separator
.col-border-lg
-->
<div class="row">
<div class="col-12 col-lg-3">
<h3 class="h6 text-muted text-uppercase fs--14 mb-3">
Shop Homepage
</h3>
<ul class="prefix-link-icon prefix-icon-dot">
<li class="dropdown-item">
<a class="dropdown-link" href="shop-index-1.html">Shop Home 1</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-index-2.html">Shop Home 2</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-index-3.html">Shop Home 3</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-index-4.html">Shop Home 4</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-index-christmas.html">
<span class="badge badge-secondary float-end">new</span>
Shop : Christmas
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link disabled" href="#!">More : Soon</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<h3 class="h6 text-muted text-uppercase fs--14 mb-3">
Shop Category
</h3>
<ul class="prefix-link-icon prefix-icon-dot">
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-category-1.html">Category 1</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-category-2.html">Category 2</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-category-3.html">Category 3</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-category-4.html">Category 4</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-category-lazyload.html">Using Lazyload</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<h3 class="h6 text-muted text-uppercase fs--14 mb-3">
Shop Cart
</h3>
<ul class="prefix-link-icon prefix-icon-dot">
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-cart-1.html">Cart</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-cart-2.html">Cart Empty</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-checkout-success.html">Checkout Success</a>
</li>
</ul>
<h3 class="h6 text-muted text-uppercase fs--14 mb-3 mt-5">
Shop Product
</h3>
<ul class="prefix-link-icon prefix-icon-dot">
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-product-1.html">Product Page 1</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-product-2.html">Product Page 2</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-product-3.html">Product Page 3</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-product-4.html">Product Page 4</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="shop-page-product-5.html">Product Page 5</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<h3 class="h6 text-muted text-uppercase fs--14 mb-3">
Blog Pages
</h3>
<ul class="prefix-link-icon prefix-icon-line">
<li class="dropdown-item">
<a class="dropdown-link" href="blog-page-sidebar.html">With Sidebar</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="blog-page-sidebar-no.html">Without Sidebar</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="blog-page-single-sidebar.html">Single With Sidebar</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="blog-page-single-sidebar-no.html">Single Without Sidebar</a>
</li>
</ul>
<div class="mt-4">
<img width="600" height="600" class="img-fluid" src="demo.files/svg/artworks/undraw_wireframing_nxyi.svg" alt="...">
</div>
</div>
</div>
</div>
</li>
<!-- Click -->
<li class="nav-item dropdown">
<a href="#" id="navDD0" class="nav-link dropdown-toggle nav-link-caret-hide"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Click
</a>
<!-- .dropdown-menu-hover - open on hover -->
<div aria-labelledby="navDD0" class="dropdown-menu dropdown-menu-clean">
<ul class="list-unstyled m-0 p-0">
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Option 2</a></li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">
<span class="badge badge-success float-end">new</span>
Option 3
</a>
</li>
</ul>
</div>
</li>
<!--
Available Classes
-->
<!-- Dropdown Classes (should be added to primary .dropdown-menu only, dropdown childs are also affected) -->
.dropdown-menu-dark - dark dropdown (desktop only, will be white on mobile)
.dropdown-menu-hover - open on hover
.dropdown-menu-clean - no background color on hover
.dropdown-menu-uppercase - uppercase text (font-size is scalled down to 13px)
.dropdown-click-ignore - keep dropdown open on inside click (useful on forms inside dropdown)
<!-- Repositioning long dropdown childs -->
.dropdown-menu-invert - open dropdown in opposite direction (example: 2Col, 3Col, 4Col)
.dropdown-menu-up-n100 - open up with top: -100px
.dropdown-menu-up-n100 - open up with top: -150px
.dropdown-menu-up-n180 - open up with top: -180px
.dropdown-menu-up-n220 - open up with top: -220px
.dropdown-menu-up-n250 - open up with top: -250px
.dropdown-menu-up - open up without negative class
<!-- Dropdown prefix icon (optional, if enabled in variables.scss) -->
.prefix-link-icon .prefix-icon-dot - link prefix
.prefix-link-icon .prefix-icon-line - link prefix
.prefix-link-icon .prefix-icon-ico - link prefix
.prefix-link-icon .prefix-icon-arrow - link prefix
.nav-link.nav-link-caret-hide - no dropdown icon indicator on main link
.nav-item.dropdown-mega - required ONLY on fullwidth mega menu