Advanced Drop-down Menu using HTML CSS & JavaScript snippet

Loading…

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>

Advanced Drop-down Menu using HTML CSS & JavaScript snippet

Source Code

More Navbar snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery