Navbar Bootstrap 5Free+ CSS
Free Bootstrap 5 navbar snippet — Responsive Mega Menu snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
3.6k views117 downloads
gosnippets.com/preview/responsive-mega-menu-snippets
Free Bootstrap 5 navbar snippet — Responsive Mega Menu snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
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 <!--Drop Down-->
7 <ul class="drop-down-ul animated fadeIn">
8 <li class="flyout-right"><a href="#">Flyout Right</a><!--Flyout Right-->
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><!--Flyout Left-->
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 <!--//End drop down-->
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 Sidebar Navigation for Dashboard
Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

Bootstrap Transparent navbar example
Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

Bootstrap 5 e-commerce navigation with product snippet
Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.