Advanced Drop-down Menu using HTML CSS & JavaScript snippet

Navbar Bootstrap 5Free+ CSS+ JS

Advanced Drop-down Menu using HTML CSS & JavaScript snippet — a free Bootstrap 5 navbar snippet.

7.3k views155 downloads5 years ago

gosnippets.com/preview/advanced-drop-down-menu-using-html-css-&-javascript-snippet

Source Code

1<nav>
2      <div class="drop-btn">
3        Drop down <span class="fas fa-caret-down"></span>
4      </div>
5<div class="tooltip">
6</div>
7<div class="wrapper">
8        <ul class="menu-bar">
9<li><a href="#">
10            <div class="icon">
11              <span class="fas fa-home"></span></div>
12Home </a></li>
13<li class="setting-item"><a href="#">
14            <div class="icon">
15              <span class="fas fa-cog"></span></div>
16Settings & privacy <i class="fas fa-angle-right"></i>
17          </a></li>
18<li class="help-item"><a href="#">
19            <div class="icon">
20              <span class="fas fa-question-circle"></span></div>
21Help & support <i class="fas fa-angle-right"></i>
22          </a></li>
23<li><a href="#">
24            <div class="icon">
25              <span class="fas fa-user"></span></div>
26About us </a></li>
27<li><a href="#">
28            <div class="icon">
29              <span class="fas fa-comment-alt"></span></div>
30Feedback </a></li>
31</ul>
32<!-- Settings & privacy Menu-items -->
33        <ul class="setting-drop">
34<li class="arrow back-setting-btn"><span class="fas fa-arrow-left"></span>Settings & privacy</li>
35<li><a href="#">
36            <div class="icon">
37              <span class="fas fa-user"></span></div>
38Personal info </a></li>
39<li><a href="#">
40              <div class="icon">
41                <span class="fas fa-lock"></span></div>
42Password </a></li>
43<li><a href="#">
44              <div class="icon">
45                <span class="fas fa-address-book"></span></div>
46Activity log </a></li>
47<li><a href="#">
48              <div class="icon">
49                <span class="fas fa-globe-asia"></span></div>
50Languages </a></li>
51<li><a href="#">
52              <div class="icon">
53                <span class="fas fa-sign-out-alt"></span></div>
54Log out </a></li>
55</ul>
56<!-- Help & support Menu-items -->
57        <ul class="help-drop">
58<li class="arrow back-help-btn"><span class="fas fa-arrow-left"></span>Help & support</li>
59<li><a href="#">
60            <div class="icon">
61              <span class="fas fa-question-circle"></span></div>
62Help centre </a></li>
63<li><a href="#">
64            <div class="icon">
65              <span class="fas fa-envelope"></span></div>
66Support Inbox </a></li>
67<li><a href="#">
68            <div class="icon">
69              <span class="fas fa-comment-alt"></span></div>
70Send feedback </a></li>
71<li><a href="#">
72            <div class="icon">
73              <span class="fas fa-exclamation-circle"></span></div>
74Report problem </a></li>
75</ul>
76</div>
77</nav>

More Navbar snippets

Responsive Sidebar Navigation for Dashboard

Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

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.

NavbarView →

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.

NavbarView →

Comments(0)

No comments yet — be the first to start the discussion.

1<nav> 2 <div class="drop-btn"> 3 Drop down <span class="fas fa-caret-down"></span> 4 </div> 5<div class="tooltip"> 6</div> 7<div class="wrapper"> 8 <ul class="menu-bar"> 9<li><a href="#"> 10 <div class="icon"> 11 <span class="fas fa-home"></span></div> 12Home </a></li> 13<li class="setting-item"><a href="#"> 14 <div class="icon"> 15 <span class="fas fa-cog"></span></div> 16Settings & privacy <i class="fas fa-angle-right"></i> 17 </a></li> 18<li class="help-item"><a href="#"> 19 <div class="icon"> 20 <span class="fas fa-question-circle"></span></div> 21Help & support <i class="fas fa-angle-right"></i> 22 </a></li> 23<li><a href="#"> 24 <div class="icon"> 25 <span class="fas fa-user"></span></div> 26About us </a></li> 27<li><a href="#"> 28 <div class="icon"> 29 <span class="fas fa-comment-alt"></span></div> 30Feedback </a></li> 31</ul> 32 33 <ul class="setting-drop"> 34<li class="arrow back-setting-btn"><span class="fas fa-arrow-left"></span>Settings & privacy</li> 35<li><a href="#"> 36 <div class="icon"> 37 <span class="fas fa-user"></span></div> 38Personal info </a></li> 39<li><a href="#"> 40 <div class="icon"> 41 <span class="fas fa-lock"></span></div> 42Password </a></li> 43<li><a href="#"> 44 <div class="icon"> 45 <span class="fas fa-address-book"></span></div> 46Activity log </a></li> 47<li><a href="#"> 48 <div class="icon"> 49 <span class="fas fa-globe-asia"></span></div> 50Languages </a></li> 51<li><a href="#"> 52 <div class="icon"> 53 <span class="fas fa-sign-out-alt"></span></div> 54Log out </a></li> 55</ul> 56 57 <ul class="help-drop"> 58<li class="arrow back-help-btn"><span class="fas fa-arrow-left"></span>Help & support</li> 59<li><a href="#"> 60 <div class="icon"> 61 <span class="fas fa-question-circle"></span></div> 62Help centre </a></li> 63<li><a href="#"> 64 <div class="icon"> 65 <span class="fas fa-envelope"></span></div> 66Support Inbox </a></li> 67<li><a href="#"> 68 <div class="icon"> 69 <span class="fas fa-comment-alt"></span></div> 70Send feedback </a></li> 71<li><a href="#"> 72 <div class="icon"> 73 <span class="fas fa-exclamation-circle"></span></div> 74Report problem </a></li> 75</ul> 76</div> 77</nav>