Navbar Bootstrap 5Free+ CSS+ JS
Add a navbar to your UI with Advanced Drop-down Menu using HTML CSS and JavaScript with…. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
2.9k views85 downloads
gosnippets.com/preview/advanced-drop-down-menu-using-html-css-and-javascript-with…
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"></div>
6 <div class="wrapper">
7 <ul class="menu-bar">
8 <li>
9 <a href="#">
10 <div class="icon">
11 <span class="fas fa-home"></span>
12 </div>
13 Home
14 </a>
15 </li>
16 <li class="setting-item">
17 <a href="#">
18 <div class="icon">
19 <span class="fas fa-cog"></span>
20 </div>
21 Settings & privacy <i class="fas fa-angle-right"></i>
22 </a>
23 </li>
24 <li class="help-item">
25 <a href="#">
26 <div class="icon">
27 <span class="fas fa-question-circle"></span>
28 </div>
29 Help & support <i class="fas fa-angle-right"></i>
30 </a>
31 </li>
32 <li>
33 <a href="#">
34 <div class="icon">
35 <span class="fas fa-user"></span>
36 </div>
37 About us
38 </a>
39 </li>
40 <li>
41 <a href="#">
42 <div class="icon">
43 <span class="fas fa-comment-alt"></span>
44 </div>
45 Feedback
46 </a>
47 </li>
48 </ul>
49 <!-- Settings & privacy Menu-items -->
50 <ul class="setting-drop">
51 <li class="arrow back-setting-btn"><span class="fas fa-arrow-left"></span>Settings & privacy</li>
52 <li>
53 <a href="#">
54 <div class="icon">
55 <span class="fas fa-user"></span>
56 </div>
57 Personal info
58 </a>
59 </li>
60 <li>
61 <a href="#">
62 <div class="icon">
63 <span class="fas fa-lock"></span>
64 </div>
65 Password
66 </a>
67 </li>
68 <li>
69 <a href="#">
70 <div class="icon">
71 <span class="fas fa-address-book"></span>
72 </div>
73 Activity log
74 </a>
75 </li>
76 <li>
77 <a href="#">
78 <div class="icon">
79 <span class="fas fa-globe-asia"></span>
80 </div>
81 Languages
82 </a>
83 </li>
84 <li>
85 <a href="#">
86 <div class="icon">
87 <span class="fas fa-sign-out-alt"></span>
88 </div>
89 Log out
90 </a>
91 </li>
92 </ul>
93 <!-- Help & support Menu-items -->
94 <ul class="help-drop">
95 <li class="arrow back-help-btn"><span class="fas fa-arrow-left"></span>Help & support</li>
96 <li>
97 <a href="#">
98 <div class="icon">
99 <span class="fas fa-question-circle"></span>
100 </div>
101 Help centre
102 </a>
103 </li>
104 <li>
105 <a href="#">
106 <div class="icon">
107 <span class="fas fa-envelope"></span>
108 </div>
109 Support Inbox
110 </a>
111 </li>
112 <li>
113 <a href="#">
114 <div class="icon">
115 <span class="fas fa-comment-alt"></span>
116 </div>
117 Send feedback
118 </a>
119 </li>
120 <li>
121 <a href="#">
122 <div class="icon">
123 <span class="fas fa-exclamation-circle"></span>
124 </div>
125 Report problem
126 </a>
127 </li>
128 </ul>
129 </div>
130 </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.
Sign in to join the conversation.