Shown are the navigation components use in Spoke & Vessel website.
Specifications
Code
<!-- nav starts --> <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top"> <div class="container-fluid"> <div class="navbar-brand navbar-brand-left"> <a href="index.html"><img src="images/logo_nav2.png" alt="Spoke & Vessel logo" style="width:auto; height:56px; margin: 0;"></a> </div> <h4 class="brand-nav" href="#">Spoke & Vessel</a></h4> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> <!-- container-fluid.// --> </nav> <!-- nav ends-->
<div class="collapse navbar-collapse " id="main_nav"> <ul class="navbar-nav ms-auto"> <li class="nav-item dropdown has-megamenu"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Menu</a> <div class="dropdown-menu megamenu" role="menu"> <div class="row g-1"> <div class="col-lg-2 col-6"> <div class="col-megamenu"> <h6 class="title">About</h6> <ul class="list-unstyled"> <li><a href="#">Tours</a></li> <li><a href="#">Boats</a></li> <li><a href="#">Trails</a></li> <li><a href="#">Guides</a></li> <li><a href="#">Food</a></li> <li><a href="#">Historical sites</a></li> </ul> </div> <!-- col-megamenu.// --> </div><!-- end col-3 --> <div class="col-lg-2 col-6"> <div class="col-megamenu"> <h6 class="title">Tours</h6> <ul class="list-unstyled"> <li><a href="#">Upcoming</a></li> <li><a href="#">Past</a></li> <li><a href="#">Future</a></li> </ul> </div> <!-- col-megamenu.// --> </div><!-- end col-3 --> <div class="col-lg-2 col-6"> <div class="col-megamenu"> <h6 class="title">Countries</h6> <ul class="list-unstyled"> <li><a href="belgium.html">Belgium</a></li> <li><a href="germany.html">Germany</a></li> <li><a href="france.html">France</a></li> <li><a href="netherlands.html">Netherlands</a></li> </ul> </div> <!-- col-megamenu.// --> </div><!-- end col-3 --> <div class="col-lg-2 col-6"> <div class="col-megamenu"> <h6 class="title">Planning</h6> <ul class="list-unstyled"> <li><a href="#">Packing</a></li> <li><a href="#">Air Travel</a></li> <li><a href="#">Ground Transport</a></li> <li><a href="#">Clothing</a></li> <li><a href="#">Gear</a></li> <li><a href="#">Traveling Papers</a></li> </ul> </div> <!-- col-megamenu.// --> </div><!-- end col-3 --> <div class="col-lg-2 col-6"> <div class="col-megamenu"> <h6 class="title">News</h6> <ul class="list-unstyled"> <li><a href="#">Covid-19</a></li> <li><a href="#">Weather</a></li> <li><a href="#">EU Traveling</a></li> <li><a href="#">Regulations</a></li> <li><a href="#">Updates</a></li> </ul> </div> <!-- col-megamenu.// --> </div> <div class="col-lg-2 col-6"> <div class="col-megamenu"> <h6 class="title">Contact</h6> <ul class="list-unstyled"> <li><a href="#">Inquires</a></li> <li><a href="#">Register</a></li> <li><a href="#">Email</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Linkin</a></li> <li><a href="#">Pinterest</a></li> </ul> </div> <!-- col-megamenu.// --> </div><!-- end col-3 --> </div><!-- end row --> </div> <!-- dropdown-mega-menu.// --> </li> </ul> </div> <!-- navbar-collapse.// -->