mega menu bootstrap 5

1<li class="nav-item dropdown">
2
3	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
4	Mega Dropdown
5	</a>
6
7	<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">
8
9		<img src="./img/cover.jpg" class="img-fluid" alt="" >
10
11		<div class="d-flex align-items-start flex-column flex-sm-row p-3">
12
13			<div>
14				<div class="dropdown-header">Services</div>
15				<a class="dropdown-item" href="#" >Développement web</a>
16				<a class="dropdown-item" href="#" >Développement mobile</a>
17				<a class="dropdown-item" href="#" >UX et Design</a>
18				<a class="dropdown-item" href="#" >Infographie</a>
19			</div>
20
21			<div>
22				<div class="dropdown-header">Technologies</div>
23				<a class="dropdown-item" href="#" >HTML et CSS</a>
24				<a class="dropdown-item" href="#" >BOOTSTRAP</a>
25				<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
26				<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
27			</div>
28
29			<div>
30				<div class="dropdown-header">Outils</div>
31				<a class="dropdown-item" href="#" >Visual Studio Code</a>
32				<a class="dropdown-item" href="#" >Laragon</a>
33				<a class="dropdown-item" href="#" >Google Chrome</a>
34				<a class="dropdown-item" href="#" >Windows 10</a>
35			</div>
36
37		</div>
38
39	</div>
40
41</li>

1<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
2<div class="container-fluid">
3	<a class="navbar-brand" href="#">Brand</a>
4	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav">
5		<span class="navbar-toggler-icon"></span>
6	</button>
7	<div class="collapse navbar-collapse" id="main_nav">
8		<ul class="navbar-nav">
9			<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
10			<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
11			<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
12			<li class="nav-item dropdown has-megamenu">
13				<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega menu  </a>
14				<div class="dropdown-menu megamenu" role="menu">
15					This is content of megamenu. <br>
16				       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
17					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
18					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
19					consequat.
20				</div> <!-- dropdown-mega-menu.// -->
21			</li>
22		</ul>
23		<ul class="navbar-nav ms-auto">
24			<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
25			<li class="nav-item dropdown">
26				<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
27			    <ul class="dropdown-menu dropdown-menu-end">
28				  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
29				  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
30			    </ul>
31			</li>
32		</ul>
33	</div> <!-- navbar-collapse.// -->
34</div> <!-- container-fluid.// -->
35</nav>
36
37<style>
38  .navbar .megamenu{ padding: 1rem; }
39
40/* ============ desktop view ============ */
41@media all and (min-width: 992px) {
42
43  .navbar .has-megamenu{position:static!important;}
44  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
45
46}	
47/* ============ desktop view .end// ============ */
48
49/* ============ mobile view ============ */
50@media(max-width: 991px){
51  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
52    overflow-y: auto;
53      max-height: 90vh;
54      margin-top:10px;
55  }
56}
57/* ============ mobile view .end// ============ */
58  </style>