Dropdown Mega Menu
Documentation and examples for powerful, and responsive navigation mega menu.
Medium menu with Svg icons
This is a medium dropdown menu with svg icons
<!--medium menu with svg icon-->
<li class="nav-item dropdown">
<a id="navbarmd" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-md dropdown-menu-lg-center p-4" aria-labelledby="navbarmd">
<div class="list-group list-group-flush">
<a class="list-group-item dropdown-item d-flex align-item-center" href="#">
<!-- Icon -->
<div class="align-self-center text-primary">
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><path stroke="currentColor" d='M416,221.25V416a48,48,0,0,1-48,48H144a48,48,0,0,1-48-48V96a48,48,0,0,1,48-48h98.75a32,32,0,0,1,22.62,9.37L406.63,198.63A32,32,0,0,1,416,221.25Z' style='fill:none;stroke-linejoin:round;stroke-width:32px'/><path stroke="currentColor" d='M256,56V176a32,32,0,0,0,32,32H408' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='288' x2='336' y2='288' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='368' x2='336' y2='368' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<!-- Content -->
<div class="ms-4 align-self-center">
<h6 class="fw-medium text-uppercase mb-0">
Documentation
</h6>
<p class="text-light-blue mb-0">
Development guides
</p>
</div>
</a>
<a class="list-group-item dropdown-item d-flex align-item-center" href="#">
<!-- Icon -->
<div class="align-self-center text-primary">
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><rect stroke="currentColor" x='48' y='48' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='288' y='48' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='48' y='288' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='288' y='288' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<!-- Content -->
<div class="ms-4 align-self-center">
<h6 class="fw-medium text-uppercase mb-0">
Components
</h6>
<p class="text-light-blue mb-0">
Full list of components
</p>
</div>
</a>
<a class="list-group-item dropdown-item d-flex align-item-center" href="#">
<!-- Icon -->
<div class="align-self-center text-primary">
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><polyline stroke="currentColor" points='160 368 32 256 160 144' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='352 368 480 256 352 144' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='304' y1='96' x2='208' y2='416' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<!-- Content -->
<div class="ms-4 align-self-center">
<h6 class="fw-medium text-uppercase mb-0">
Changelog
</h6>
<p class="text-light-blue mb-0">
Keep track of changes
</p>
</div>
<!-- Badge -->
<span class="badge bg-light text-primary rounded-md ms-auto align-self-center">
1.0.0
</span>
</a>
</div>
</div>
</li>
You can settings this mega menu in hover or click style. If you want to use click style, just remove class .hover-navbar from main-nav navbar navbar-expand-lg hover-navbar
Paste dropdown mega menu code in navbar area