html nav bar

The HTML nav tag is used to create a Navigation Bar or Menu Bar inside the website. There is by default a CSS property display-block above the HTML nav tag, due to which all the links are automatically placed in the horizontal position.

Related: Best 8 examples of using CSS background position property

There are several ways to create a navigation bar within HTML that can create a good navigation menu for you. To explain to you completely, we have some simple examples from which you will know how to make a nav bar in HTML.

HTML Nav Tag

In the following example, we have used HTML Nav Tag and styled the navbar with CSS.

<nav class="mynavbar">
	<a href="#">Menu 1</a>
	<a href="#">Menu 2</a>
	<a href="#">Menu 3</a>
	<a href="#">Menu 4</a>
	<a href="#">Menu 5</a>
</nav>

/ ***** CSS Style for navigation bar ***** /

<style>
	nav.mynavbar {
    padding: 15px;
    background: #3F51B5;
}
nav.mynavbar a {
    padding: 0px 15px;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
}
</style>

HTML Nav Bar Using List Tag

If you want to make Navigation Bar using the List Tag, so for that you have to use the display-inline property of CSS with List Tag. Learn from the example below how to make a navigation bar using the list tag.

<div class="mainsection">
	<ul class="my-menu">
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
	</ul> 
</div>  


/ ***** CSS Style for navigation bar ***** /

<style>
ul.my-menu {
	list-style-type: none;
}

.my-menu ul, li {
	display: inline;
}

.mainsection{
	background-color: #3F51B5;
}

ul.my-menu {
	padding: 20px;
}

ul.my-menu li a {
	padding: 10px 30px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	border-right:1px dashed #fff;
}
</style>

Simple Horizontal Menu List

<div class="my_menu">
	<ul>
		<li>Menu 1</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
		<li>Menu 5</li>
	</ul>
</div>  


/ ***** CSS Style for navigation bar ***** /

<style>
ul {
	list-style-type: none;
}
li {
	float: left;
	color: #fff;
	background: #0c8e0c;
	padding: 20px;
}
li:hover {
	cursor:pointer;
}
</style>

Other Example

<header>
	<div class="my_menu">
		<a href="#">Menu 1</a>
		<a href="#">Menu 2</a>
		<a href="#">Menu 3</a>
		<a href="#">Menu 4</a>
		<a href="#">Menu 5</a>
	</div>
</header>


/ ***** CSS Style for navigation bar ***** /

<style>
.my_menu a {
	padding: 18px;
	text-decoration: none;
	color: #ffffff;
	font-size: 18px;
}

.my_menu {
	overflow: hidden;
	padding: 10px;
}

header{
	background-color: #3F51B5;        
}
</style>

Vertical HTML Navigation Bar

If you want to make a fixed vertical navigation bar, then for that you have to fix the position of your navigation bar using the CSS property. Below we have created the complete Vertical Navigation Bar example for you, from there you will find out how to make Vertical Navigation Bar in HTML.

<div class="my_menu">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
	</ul>
</div>


<div class="right-section">
	<p>This is scrollable section</p>
</div>



/ ***** CSS Style for navigation bar ***** /

<style>
ul {
    padding: 0;
    width: 20%;
	list-style-type: none;
    margin: 0;
    background-color: #00BCD4;
    position: fixed;
    height: 100%;
}

li a {
    color: #fff;
    text-decoration: none;
	display: block;
    border-bottom: 2px dashed #fff;
	padding: 12px 10px;
}

li a:hover {
	color: #FFC107;
	background-color: #673AB7;
}
.right-section{
    margin-left: 20%;
    padding: 25px;
	height:auto;
}
</style>

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let’s know what those questions are and what their answers are.

How do I link CSS to HTML?
To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do you underline in HTML?
With the u tag you can underline your text.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

What is text formatting in HTML?
To make the text appear well, the text is formatted with a few HTML tags.

What is BR tag?
br tag is used to break the line.

What is the HTML code for bold?
You can use b tag and strong tag to bold your text.

What does </ B mean in HTML?
b tag means “bold”.

Note: All the examples you have seen inside this article have all been made by us and tested thoroughly. So you can use all these without any difficulty.

Related: Easiest example of applying HTML background color and image