Can I use "Responsive Mega Menu snippets" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Responsive Mega Menu snippets — Free Navbar Snippet (Bootstrap 5)

Loading…

1<div class="content"> 2 3 <ul class="exo-menu"> 4 <li><a class="active" href="#"><i class="fa fa-home"></i> Home</a></li> 5 <li class="drop-down"><a href="#"><i class="fa fa-cogs"></i> Flyout</a> 6  7 <ul class="drop-down-ul animated fadeIn"> 8 <li class="flyout-right"><a href="#">Flyout Right</a> 9 <ul class="animated fadeIn"> 10 <li><a href="#">Mobile</a></li> 11 <li><a href="#">Computer</a></li> 12 <li><a href="#">Watch</a></li> 13 </ul> 14 </li> 15 16 <li class="flyout-left"><a href="#">Flyout Left</a> 17 <ul class="animated fadeIn"> 18 <li><a href="#">Mobile</a></li> 19 <li><a href="#">Computer</a></li> 20 <li><a href="#">Watch</a></li> 21 </ul> 22 </li> 23 24 <li><a href="#">No Flyout</a></li> 25 26 </ul> 27  28 29 </li> 30 <li><a href="#"><i class="fa fa-cogs"></i> Services</a></li> 31 <li><a href="#"><i class="fa fa-briefcase"></i> Portfolio</a></li> 32 <li class="mega-drop-down"><a href="#"><i class="fa fa-list"></i> Mega Menu</a> 33 <div class="animated fadeIn mega-menu"> 34 <div class="mega-menu-wrap"> 35 <div class="row"> 36 <div class="col-md-4"> 37 <h4 class="row mega-title">Feature</h4> 38 <img class="img-responsive" src="https://2.bp.blogspot.com/-VG_e0pKfrDo/VcLb6JwZqfI/AAAAAAAAGCk/8ZgA9kZqTQ8/s1600/images3.jpg"> 39 </div> 40 <div class="col-md-2"> 41 <h4 class="row mega-title">Standers</h4> 42 <ul class="stander"> 43 <li><a href="#">Mobile</a></li> 44 <li><a href="#">Computer</a></li> 45 <li><a href="#">Watch</a></li> 46 <li><a href="#">laptop</a></li> 47 <li><a href="#">Camera</a></li> 48 <li><a href="#">I pad</a></li> 49 <li><a class="view-more btn- btn-sm" href="#">View more</a></li> 50 </ul> 51 </div> 52 <div class="col-md-3"> 53 <h4 class="row mega-title">Description</h4> 54 <ul class="description"> 55 <li><a href="#">Women</a> 56 <span>Description of Women</span> 57 </li> 58 <li><a href="#">Men</a> 59 <span>Description of men Cloths</span> 60 </li> 61 <li><a href="#">Kids</a> 62 <span>Description of Kids Cloths</span> 63 </li> 64 <li><a href="#">Others</a> 65 <span>Description of Others Cloths</span> 66 </li> 67 <li> 68 <a class="view-more btn btn-sm " href="#">View more</a> 69 70 </li> 71 </ul> 72 </div> 73 <div class="col-md-3"> 74 <h4 class="row mega-title">Icon + Description</h4> 75 <ul class="icon-des"> 76 <li><a href="#"><i class="fa fa-globe"></i>Web</a></li> 77 <li><a href="#"><i class="fa fa-mobile"></i>Mobile</a></li> 78 <li><a href="#"><i class="fa fa-arrows-h"></i>Responsive</a></li> 79 <li><a href="#"><i class="fa fa-desktop"></i>Desktop</a></li> 80 <li><a href="#"><i class="fa fa-paint-brush"></i>UI/UX</a></li> 81 </ul> 82 </div> 83 84 </div> 85 </div> 86 </div> 87 </li> 88 <li class="blog-drop-down"><a href="#"><i class="fa fa-bullhorn"></i> Blog</a> 89 <div class="Blog animated fadeIn"> 90 <div class="col-md-4"> 91 <img class="img-responsive" src="https://2.bp.blogspot.com/-VG_e0pKfrDo/VcLb6JwZqfI/AAAAAAAAGCk/8ZgA9kZqTQ8/s1600/images3.jpg"> 92 <div class="blog-des"> 93 <h4 class="blog-title">Lorem ipsum dolor sit amet</h4> 94 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 95 tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 96 nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 97 Duis autem vel eum iriure dolor in hendrerit in vulputate. </p> 98 <a class="view-more btn- btn-sm" href="#">Read More</a> 99 </div> 100 </div> 101 <div class="col-md-4"> 102 <img class="img-responsive" src="https://3.bp.blogspot.com/-hUt5FrdZHio/VcLb5dlwTBI/AAAAAAAAGCU/UUH5N1JkoQc/s1600/images1.jpg"> 103 <div class="blog-des"> 104 <h4 class="blog-title">Lorem ipsum dolor sit amet</h4> 105 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 106 tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 107 nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 108 Duis autem vel eum iriure dolor in hendrerit in vulputate. </p> 109 <a class="view-more btn- btn-sm" href="#">Read More</a> 110 </div> 111 </div> 112 <div class="col-md-4"> 113 <img class="img-responsive" src="https://4.bp.blogspot.com/-A7U1uPlSq6Y/VcLb5kKHCkI/AAAAAAAAGCc/7WghyndTEuY/s1600/images2.jpg"> 114 <div class="blog-des"> 115 <h4 class="blog-title">Lorem ipsum dolor sit amet</h4> 116 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 117 tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 118 nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 119 Duis autem vel eum iriure dolor in hendrerit in vulputate. </p> 120 <a class="view-more btn- btn-sm" href="#">Read More</a> 121 </div> 122 </div> 123 124 125 </div> 126 </li> 127 <li class="images-drop-down"><a href="#"><i class="fa fa-photo"></i> Images</a> 128 <div class="Images animated fadeIn"> 129 <div class="col-md-3"> 130 <h4>Images Title </h4> 131 <img class="img-responsive" src="https://2.bp.blogspot.com/-VG_e0pKfrDo/VcLb6JwZqfI/AAAAAAAAGCk/8ZgA9kZqTQ8/s1600/images3.jpg"> 132 </div> 133 <div class="col-md-3"> 134 <h4>Images Title </h4> 135 <img class="img-responsive" src="https://3.bp.blogspot.com/-hUt5FrdZHio/VcLb5dlwTBI/AAAAAAAAGCU/UUH5N1JkoQc/s1600/images1.jpg"> 136 </div> 137 <div class="col-md-3"> 138 <h4>Images Title </h4> 139 <img class="img-responsive" src="https://4.bp.blogspot.com/-A7U1uPlSq6Y/VcLb5kKHCkI/AAAAAAAAGCc/7WghyndTEuY/s1600/images2.jpg"> 140 </div> 141 <div class="col-md-3"> 142 <h4>Images Title </h4> 143 <img class="img-responsive" src="https://3.bp.blogspot.com/-hGrnZIjzL2k/VcLb47kyQKI/AAAAAAAAGCQ/J6Q2IAHIQvQ/s1600/image4.jpg"> 144 </div> 145 146 </div> 147 148 </li> 149 <li><a href="#"><i class="fa fa-envelope"></i> Contact</a> 150 <div class="contact"> 151 152 </div> 153 </li> 154 <a href="#" class="toggle-menu visible-xs-block">|||</a> 155 </ul> 156 157 158 </div>

Responsive Mega Menu snippets

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Navbar snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection