uix-kit/src/components/_global/include-menu-mega.html

A free web kits for fast web design and development, compatible with Bootstrap v5.

                        <!-- Navigation Start-->
                        
                        <nav class="uix-menu__container uix-trans">
                               
                               <div class="uix-menu__inner">
									<span class="uix-brand--mobile"><img src="assets/images/logo-colorful.png" alt="@@{website_title}"></span>
									<ul class="uix-menu"> 


										<li class="multi-column current-menu-item is-active"><a href="#">Mega Menu One</a>
											<ul class="sub-menu">
												<li>
													<span class="multi-column-title">Column 1</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 2</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title Long Long Long Long Long Long Long Long</a></li>
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>

												<li>
													<span class="multi-column-title">Column 3</span>
													<ul class="sub-menu">
														<li></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
											</ul>

										</li>

										<li><a href="#">Placeholder</a></li>


										<li><a href="#">Dropdown</a>
											<ul class="sub-menu">
												<li><a href="#">Dropdown 1</a>
													<ul class="sub-menu">
														<li><a href="#">Title 1</a></li>
														<li><a href="#">Title 2</a></li>
														<li><a href="#">Title 3</a>
															<ul class="sub-menu">
																<li><a href="#">Title 1</a></li>
																<li><a href="#">Title 2</a></li>
																<li><a href="#">Title 3</a></li>
															</ul>
															<!-- .sub-menu  end -->
														</li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li><a href="#">Dropdown 2 Long Long Long Long Long Long Long Long Long Long</a></li>
												<li><a href="#">Dropdown 3</a></li>
											</ul>
											<!-- .sub-menu  end -->
										</li>


										<li class="multi-column"><a href="#">Mega Menu Two</a>
											<ul class="sub-menu">
												<li>
													<span class="multi-column-title">Column 1</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 2</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title Long Long Long Long Long Long Long Long</a></li>
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 3</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 4</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>  

												<li>
													<span class="multi-column-title">Column 5</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 6</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>  
												<li>
													<span class="multi-column-title">Column 7</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>  
												<li>
													<span class="multi-column-title">Column 8</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>   
												<li>
													<span class="multi-column-title">Column 9</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>       


											</ul>

										</li>							

										<li><a href="#">Placeholder</a></li>


										<li class="multi-column"><a href="#">Mega Menu Three</a>
											<ul class="sub-menu">
												<li>
													<span class="multi-column-title">Column 1</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 2</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<span class="multi-column-title">Column 3</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												  <li>
													<span class="multi-column-title">Column 4</span>
													<ul class="sub-menu">
														<li><a href="#">Sub Menu Title</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>

											</ul>

										</li>							



									</ul>
									<div class="uix-menu__right-box">
										<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
											<i class="fa fa-twitter"></i>
										</a>
										<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
											<i class="fa fa-facebook"></i>
										</a>
										<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
											<i class="fa fa-github"></i>
										</a>   
									</div>
 
                               </div><!-- /.uix-menu__inner -->

                        </nav>
                        <!-- .uix-menu__container end -->