Mega-submenu

How to use?

1. Purchase Bootstrap5 Menukit, unzip and include menukit.js (3KB) and menukit.css (4KB)

2. If you like, you can customize menukit.scss (sass) for your needs

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