A Sidebar Navigation menu serve as a helpful tool on websites or applications. It’s a vertical list that appears either on the left or right side of the screen, help users in swiftly locating the desired desired information or pages. Sidebar menus are particularly advantageous for sites that contain extensive content or information.
What is a Sidebar Navigation Menu?
A Sidebar Navigation Menu is a series of links presented in a column on the side. Each links redirects the user to a distinct section of the website or application. These menus are conveniently visible and accessible because they stay in the same place, even when the page is scrolled.
For instance, when exploring an online store, the sidebar might display sections such as “Men’s Clothing,” “Women’s Clothing,” “Shoes,” or “Accessories.” Selecting a link from one of these sections will direct you to products within the category.
In this article, you’ll discover the process of developing a dynamic sidebar with submenus using HTML, CSS, and JavaScript. This side features a variety of elements such as submenus, the ability to switch between light and dark mode, and functionalities that enhance the visual appeal and adaptability of the user interface.
Whether, you’re a beginner or already possess some knowledge in web development, this guide offers detailed instructions and code examples to assist you in grasping the concepts behind both the sidebar and the main navigation menu.
HTML Code
To begin, insert the following HTML codes into your index.html to establish a fundamental structure for the Side Navigation Menu Bar. This code encompasses all the necessary HTML for both the sidebar and the main navigation menu.
Create a folder, feel free to choose any name for this folder, and within it, generate an index.html The name of the file should be index, and its extension should be .html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Boxicons CSS -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Responsive Side Navigation Bar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar">
<div class="logo_item">
<i class="bx bx-menu" id="sidebarOpen"></i>
<img src="images/logo.png" alt=""></i>Coding Jasim
</div>
<div class="search_bar">
<input type="text" placeholder="Search" />
</div>
<div class="navbar_content">
<i class="bi bi-grid"></i>
<i class='bx bx-sun' id="darkLight"></i>
<i class='fa fa-bell'></i>
<img src="images/profile.jpg" alt="" class="profile" />
</div>
</nav>
<!-- sidebar -->
<nav class="sidebar">
<div class="menu_content">
<ul class="menu_items">
<div class="menu_title menu_dahsboard"></div>
<!-- duplicate or remove this li tag if you want to add or remove navlink with submenu -->
<!-- start -->
<li class="item">
<div href="#" class="nav_link submenu_item">
<span class="navlink_icon">
<i class="bx bx-home-alt"></i>
</span>
<span class="navlink">Home</span>
<i class="bx bx-chevron-right arrow-left"></i>
</div>
<ul class="menu_items submenu">
<a href="#" class="nav_link sublink">Navigation Sublink 1</a>
<a href="#" class="nav_link sublink">Navigation Sublink 2</a>
<a href="#" class="nav_link sublink">Navigation Sublink 3</a>
<a href="#" class="nav_link sublink">Navigation Sublink 4</a>
</ul>
</li>
<!-- end -->
<!-- Copy this list item to include or delete a navigation link under the submenu -->
<!-- begin -->
<li class="item">
<div href="#" class="nav_link submenu_item">
<span class="navlink_icon">
<i class="bx bx-grid-alt"></i>
</span>
<span class="navlink">Orders</span>
<i class="bx bx-chevron-right arrow-left"></i>
</div>
<ul class="menu_items submenu">
<a href="#" class="nav_link sublink">Navigation Sublink</a>
<a href="#" class="nav_link sublink">Navigation Sublink</a>
<a href="#" class="nav_link sublink">Navigation Sublink 1</a>
<a href="#" class="nav_link sublink">Navigation Sublink 1</a>
</ul>
</li>
<!-- end -->
</ul>
<ul class="menu_items">
<div class="menu_title menu_editor"></div>
<!-- copy these li tag if you wish to isert or delete a navigation link only -->
<!-- Begin -->
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="fa fa-power-off"></i>
</span>
<span class="navlink">Electronics</span>
</a>
</li>
<!-- End -->
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="fa fa-home"></i>
</span>
<span class="navlink">Smart Home</span>
</a>
</li>
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="fa fa-gift"></i>
</span>
<span class="navlink">Gift Cards</span>
</a>
</li>
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="fa fa-cloud-upload"></i>
</span>
<span class="navlink">Upload new</span>
</a>
</li>
</ul>
<ul class="menu_items">
<div class="menu_title menu_setting"></div>
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="fa fa-flag"></i>
</span>
<span class="navlink">Notice board</span>
</a>
</li>
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="bx bx-medal"></i>
</span>
<span class="navlink">Award</span>
</a>
</li>
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="bx bx-cog"></i>
</span>
<span class="navlink">Setting</span>
</a>
</li>
<li class="item">
<a href="#" class="nav_link">
<span class="navlink_icon">
<i class="bx bx-layer"></i>
</span>
<span class="navlink">Features</span>
</a>
</li>
</ul>
<!-- Sidebar hide / unhide -->
<div class="bottom_content">
<div class="bottom expand_sidebar">
<span> Expand</span>
<i class='bx bx-log-in' ></i>
</div>
<div class="bottom collapse_sidebar">
<span> Collapse</span>
<i class='bx bx-log-out'></i>
</div>
</div>
</div>
</nav>
<!-- JavaScript -->
<script src="script.js"></script>
</body>
</html>CSS Code
Following that, add the specified CSS styles to your style.css file to give the appearance to the Sidebar and Navigation Bar. Now, you’re welcome to adjust these styles according to your liking by altering the hue, font style, dimensions, and additional CSS properties. Once these styles are in place, the Sidebar appear will appear in the browser first. Remember, the name of the file will be style and its extension should be .css.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--white-color: #fff;
--blue-color: #4070f4;
--grey-color: #707070;
--grey-color-light: #2b8eac;
}
body {
background-color: #f5fdc2;
transition: all 0.5s ease;
}
body.dark {
background-color: #333;
}
body.dark {
--white-color: #333;
--blue-color: #fff;
--grey-color: #f2f2f2;
--grey-color-light: #329187;
/*--grey-color-light: #aaa;*/
}
/* navbar */
.navbar {
position: fixed;
top: 0;
width: 100%;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 30px;
z-index: 1000;
box-shadow: 0 0 2px var(--grey-color-light);
}
.logo_item {
display: flex;
align-items: center;
column-gap: 10px;
font-size: 22px;
font-weight: 500;
color: var(--blue-color);
}
.navbar img {
width: 35px;
height: 35px;
object-fit: cover;
border-radius: 50%;
}
.search_bar {
height: 47px;
max-width: 430px;
width: 100%;
}
.search_bar input {
height: 100%;
width: 100%;
border-radius: 25px;
font-size: 18px;
outline: none;
background-color: var(--white-color);
color: var(--grey-color);
border: 1px solid var(--grey-color-light);
padding: 0 20px;
}
.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}
.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);
}
/* sidebar */
.sidebar {
background-color: var(--white-color);
width: 260px;
position: fixed;
top: 0;
left: 0;
height: 100%;
padding: 80px 20px;
z-index: 100;
overflow-y: scroll;
box-shadow: 0 0 1px var(--grey-color-light);
transition: all 0.5s ease;
}
.sidebar.close {
padding: 60px 0;
width: 80px;
}
.sidebar::-webkit-scrollbar {
display: none;
}
.menu_content {
position: relative;
}
.menu_title {
margin: 15px 0;
padding: 0 20px;
font-size: 18px;
}
.sidebar.close .menu_title {
padding: 6px 30px;
}
.menu_title::before {
color: var(--grey-color);
white-space: nowrap;
}
.menu_dahsboard::before {
content: "Dashborad";
}
.menu_editor::before {
content: "Products";
}
.menu_setting::before {
content: "Setting";
}
.sidebar.close .menu_title::before {
content: "";
position: absolute;
height: 2px;
width: 18px;
border-radius: 12px;
background: var(--grey-color-light);
}
.menu_items {
padding: 0;
list-style: none;
}
.navlink_icon {
position: relative;
font-size: 23px;
min-width: 50px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
.navlink_icon::before {
content: "";
position: absolute;
height: 100%;
width: calc(100% + 100px);
left: -20px;
}
.navlink_icon:hover {
background: var(--blue-color);
}
.sidebar .nav_link {
display: flex;
align-items: center;
width: 100%;
padding: 4px 15px;
border-radius: 8px;
text-decoration: none;
color: var(--grey-color);
white-space: nowrap;
}
.sidebar.close .navlink {
display: none;
}
.nav_link:hover {
color: var(--white-color);
background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
background: var(--white-color);
}
.submenu_item {
cursor: pointer;
}
.submenu {
display: none;
}
.submenu_item .arrow-left {
position: absolute;
right: 10px;
display: inline-block;
margin-right: auto;
}
.sidebar.close .submenu {
display: none;
}
.show_submenu ~ .submenu {
display: block;
}
.show_submenu .arrow-left {
transform: rotate(90deg);
}
.submenu .sublink {
padding: 15px 15px 15px 52px;
}
.bottom_content {
position: fixed;
bottom: 60px;
left: 0;
width: 260px;
cursor: pointer;
transition: all 0.5s ease;
}
.bottom {
position: absolute;
display: flex;
align-items: center;
left: 0;
justify-content: space-around;
padding: 18px 0;
text-align: center;
width: 100%;
color: var(--grey-color);
border-top: 1px solid var(--grey-color-light);
background-color: var(--white-color);
}
.bottom i {
font-size: 20px;
}
.bottom span {
font-size: 18px;
}
.sidebar.close .bottom_content {
width: 50px;
left: 15px;
}
.sidebar.close .bottom span {
display: none;
}
.sidebar.hoverable .collapse_sidebar {
display: none;
}
#sidebarOpen {
display: none;
}
@media screen and (max-width: 768px) {
#sidebarOpen {
font-size: 25px;
display: block;
margin-right: 10px;
cursor: pointer;
color: var(--grey-color);
}
.sidebar.close {
left: -100%;
}
.search_bar {
display: none;
}
.sidebar.close .bottom_content {
left: -100%;
}
}JavaScript Code
Lastly, integrate the following JavaScript code into you script.js file to introduce the ability to display/hide the Sidebar navigation and switch between dark and light themes when the theme switcher button is clicked.
const mainbody = document.querySelector("body");
const dkLight = document.querySelector("#darkLight");
const sdbar = document.querySelector(".sidebar");
const submenuItems = document.querySelectorAll(".submenu_item");
const sdbarOpen = document.querySelector("#sidebarOpen");
const sdbarClose = document.querySelector(".collapse_sidebar");
const sdbarExpand = document.querySelector(".expand_sidebar");
sdbarOpen.addEventListener("click", () => sdbar.classList.toggle("close"));
sdbarClose.addEventListener("click", () => {
sdbar.classList.add("close", "hoverable");
});
sdbarExpand.addEventListener("click", () => {
sdbar.classList.remove("close", "hoverable");
});
sdbar.addEventListener("mouseenter", () => {
if (sdbar.classList.contains("hoverable")) {
sdbar.classList.remove("close");
}
});
sdbar.addEventListener("mouseleave", () => {
if (sdbar.classList.contains("hoverable")) {
sdbar.classList.add("close");
}
});
dkLight.addEventListener("click", () => {
mainbody.classList.toggle("dark");
if (mainbody.classList.contains("dark")) {
document.setI;
dkLight.classList.replace("bx-sun", "bx-moon");
} else {
dkLight.classList.replace("bx-moon", "bx-sun");
}
});
submenuItems.forEach((item, index) => {
item.addEventListener("click", () => {
item.classList.toggle("show_submenu");
submenuItems.forEach((item2, index2) => {
if (index !== index2) {
item2.classList.remove("show_submenu");
}
});
});
});
if (window.innerWidth < 768) {
sdbar.classList.add("close");
} else {
sdbar.classList.remove("close");
}To wrap up, we started by setting up a basic HTML layout for the Sidebar and Navigation in an HTML document. Following that, we utilized CSS to the Sidebar and Navigation Bar their aesthetic. Lastly, we employed JavaScript to add the functionality for the Sidebar navigation to toggle between visible and hidden states and to switch between dark and light modes.
In summary, by adhering to the provided instruction and code examples, you have successfully learned how to develop a responsive Sidebar and Navigation Menu Bar with all the necessary functionalities.
While building your Side Navigation Bar, if you face any issues or if your code does not function as intended, you are welcome to download the source code for this Sidebar for free by clicking the download button.