Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
1<input type="checkbox" id="check">
2 <!--header area start-->
3 <header>
4 <label for="check">
5 <i class="fas fa-bars" id="sidebar_btn"></i>
6 </label>
7 <div class="left_area">
8 <h3>Go<span>Snippets</span></h3>
9 </div>
10 <div class="right_area">
11 <a href="#" class="logout_btn">Logout</a>
12 </div>
13 </header>
14 <!--header area end-->
15 <!--mobile navigation bar start-->
16 <div class="mobile_nav">
17 <div class="nav_bar">
18 <img src="1.png" class="mobile_profile_image" alt="">
19 <i class="fa fa-bars nav_btn"></i>
20 </div>
21 <div class="mobile_nav_items">
22 <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
23 <a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
24 <a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
25 <a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
26 <a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
27 <a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
28 </div>
29 </div>
30 <!--mobile navigation bar end-->
31 <!--sidebar start-->
32 <div class="sidebar">
33 <div class="profile_info">
34 <img src="https://i.imgur.com/iQpdHb2.jpg" class="profile_image" alt="">
35 <h4>Williamson</h4>
36 </div>
37 <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
38 <a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
39 <a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
40 <a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
41 <a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
42 <a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
43 </div>
44 <!--sidebar end-->
45
46 <div class="content">
47 <div class="card">
48 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
49 </div>
50 <div class="card">
51 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
52 </div>
53 <div class="card">
54 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
55 </div>
56 </div>
57 
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.
Elastic Active Tab Animation snippet using only HTML & CSS
Free Bootstrap 5 navbar snippet — Elastic Active Tab Animation snippet using only HTML & CSS. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.