Can I use "Advanced Drop-down Menu using HTML CSS & JavaScript snippet" 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.

Advanced Drop-down Menu using HTML CSS & JavaScript snippet — Free Navbar Snippet (Bootstrap 5)

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

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