Navbar (Navigation-Bar)

A web browser navigation bar includes the back and forward buttons, as well as the Location bar where URLs are entered. Formerly the functionality of the navigation bar was split between the browser's toolbar and the address bar, but Google Chrome introduced the practice of merging the two.

Ex:- E-commerce Websites, Social Media Websites, Coding Platforms,etc.

Basic Navbar Side Navbar Top-Down Navbar Search Navbar
HTML Code

<div id="basic-nav">
<span class="nav-logo"><a href="#"><img src="Images/nav-logo.png" alt="logo"></a></span>
<ul id="basic-nav-list" class="nav-list">
<li><a href="#"> Home</a></li>
<li> <a href="#"> Features</a></li>
<li><a href="#"> Pricing</a></li>
<li><a href="#"> About</a></li>
</ul>
</div>
 <div id="side-nav">
<div id="nav-top">
<span class="ham-switch" onclick="slideNav()"><i class="fa-solid fa-bars ham"></i></span>
</div>
<div id="nav-side">
<ul id="side-nav-list">
<span class="nav-logo"><a href="#"><img src="Images/nav-logo.png" alt="logo" id="side-logo"></a></span>
<li><a href="#"> Home</a></li>
<li> <a href="#"> Features</a></li>
<li><a href="#"> Pricing</a></li>
<li><a href="#"> About</a></li>
</ul>
</div>
</div>
 <div id="top-nav">
<div id="nav-top">
<span class="ham-switch" onclick="downNav()"><i class="fa-solid fa-bars ham"></i></span>
</div>
<div id="nav-down">
<ul id="down-nav-list">
<span class="nav-logo"><a href="#"><img src="Images/nav-logo.png" alt="logo" id="side-logo"></a></span>
<li><a href="#"> Home</a></li>
<li> <a href="#"> Features</a></li>
<li><a href="#"> Pricing</a></li>
<li><a href="#"> About</a></li>
<span id="closeNav" onclick="closeNav()"><i class="fa-solid fa-xmark"></i></span>
</ul>
</div>
</div>
 <div id="search-nav">
<ul id="search-nav-list" class="nav-list">
<span class="nav-logo"><a href="#"><img src="Images/nav-logo.png" alt="logo"></a></span>
<li><a href="#"> Home</a></li>
<li> <a href="#"> Features</a></li>
<li><a href="#"> Pricing</a></li>
<li><a href="#"> About</a></li>
</ul>
<div>
<input type="search" id="search-page" placeholder="Search...">
<span id="searchNav"><i class="fa-solid fa-magnifying-glass"
onclick="showSearch()"></i></span>
</div>
</div>

JavaScript Code

Paste the link below the </body> tag to use JavaScript Code.

var side_nav = 1;
//Demonstration
function slideNav() {
if (side_nav == 0) {
document.getElementById('nav-side').style.width = "25rem";
document.getElementById('side-nav-list').style.display = "flex";
side_nav = 1;
}
else {
document.getElementById('nav-side').style.width = "0";
document.getElementById('side-nav-list').style.display = "none";
side_nav = 0;
}
}
 var top_nav = 0;
document.getElementById('nav-down').style.height = "0%";
document.getElementById('down-nav-list').style.display = "none";
function downNav() {
if (top_nav == 0) {
document.getElementById('nav-down').style.height = "92%";
document.getElementById('down-nav-list').style.display = "flex";
top_nav = 1;
}
}
function closeNav() {
if (top_nav == 1) {
document.getElementById('nav-down').style.height = "0%";
document.getElementById('down-nav-list').style.display = "none";
top_nav = 0;
}
}
 var search_nav = 0;
function showSearch() {
if (search_nav == 0) {
document.getElementById('search-page').style.width = "25rem";
search_nav = 1;
}
else {
search_nav = 0;
hideSearch();
}
}
function hideSearch() {
document.getElementById('search-page').style.width = "0";
}