How to make a Navigation Bar in Html

If we want to make a navigation bar in Html, then we have to follow the steps which are given below. Using these steps, we can easily create the Navigation bar.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to make a Navigation Bar.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Navigation Bar
</Title>
</Head>
<Body> 
</Body> 
</Html>

Step 2: Now, we have to define the <nav> tag in the <body> tag where we want to make the bar.

<Body> 
<nav>
   
   
</nav>
You are at JavaTpoint Site.....
</Body> 
</Html>

Step 3: After then, we have to define the <ul> tag, which is used to show the unordered list. And, then we have to define the list items in the <li> tag. We have to define those items which we want to show in the navigation bar.

<Body> 
<nav>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Contact </a>
</li>
<li> <a href="#"> Terms of use </a>
</li>
<li>
<a href="#"> Join Us </a>
</li>
</ul>
</nav>
You are at JavaTpoint Site.....
</Body> 
</Html>

Step 4: After then, we have to place the cursor in the <head> just after the closing of the title tag. And then, we have to define the <style> tag. Step 4: After then, we have to place the cursor in the <head> just after the closing of the title tag. And then, we have to define the <style> tag.

<Head>    
<Title>   
Make a Navigation Bar
</Title>
<style type=text/css> 
  
   
</style> 
</Head>

Step 5: Now, we have to specify different id attributes which are used to set the position, color of the navigation bar. So, we have to use the following code in the head tag. We can also change the value of properties according to our requirements.

<style type=text/css> 
body 
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style> 

Step 6: After that, we have to type the <header> tag just before the opening <nav> tag. And we have to also close this tag. And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Navigation Bar
</Title>
<style type=text/css> 
body 
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style> 
</Head>
<Body> 
<header>
<nav>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Contact </a>
</li>
<li> <a href="#"> Terms of use </a>
</li>
<li>
<a href="#"> Join Us </a>
</li>
</ul>
</nav>
</header>
You are at JavaTpoint Site.....
</Body> 
</Html>

Test it Now

The output of above Html code is shown in the following screenshot: