Every website contains navigation bar. Navigation bar is an important part of website.

This post will show you about how to create navigation bar?, Types of navigation bar.

Before creating navigation bar understand about what is it and what is purpose of navigation bar?

What is navigation bar?

Navigation bar is collection of multiple links. Links in navigation bar helps user to jump from one page to another page.

navigation bar using HTML

To create navigation bar <ul> and <li> elements are used.

Example,

<html>
<head>
<title>html navigation</title>
</head>
<body>
<ul>
<li><a href="navinhtml.
html">Home</a></li>
<li><a href="navinhtml.html">About</a></li>
<li><a href="navinhtml.html">Services</a></li>
</ul>
</body>
</html>

This example describes that how to create navigation bar using only HTML. Output show how it looks.

Output:-

Navigation bar with only HTML is not so perfect, it is looks like list of link.

CSS is used to design navigation bar with different styles.

Two types of navigation bar generally used in website.

(1) Horizontal navigation bar

(2) Vertical navigation bar

Horizontal navigation bar

To create navigation menu, you have to remove bullets and underlines from the links.

To remove bullets set list-style-type property to none. list-style-type property display bullets in different shapes, like square, circle, disc, etc..) The default value is disc.

After removing the bullets, next step is to remove underline from link text. For that set text-decoration property to none. text-decoration property defined in anchor(<a>) selector.

Now arrange these links horizontally.

How to make horizontal navigation bar?

To make horizontal navigation bar set display property to inline.

This is the example of horizontal navigation bar.

<!Doctype html>
<html>
<head>
<title>Horizontal Navigation</title>
<style>
.main{
position:relative;
top:100px;
left:100px;
background-color:#c33;
height:500px;
width:700px;
}
ul{
background-color:#fc7;
width:660px;
top:90px;
}
li{
list-style-type:none;
display:inline-block;
padding:15px;
}
a{
text-decoration:none;
font-size:16pt;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<a href="horizontalnav.html">Home</a></li>
<li>
<a href="horizontalnav.html">About</a></li>
<li>
<a href="horizontalnav.html">Services</a>
</li>
<li>
<a href="horizontalnav.html">Contact Us</a></li>
</ul>
</div>
</body>
</html>

Output:-

Horizontal navigation bar

In example, <li> and <ul> elements are define under <div> element. Padding set to 15px to make area bigger. Set background color in <ul> element to get fully colored.

If you set background color on <li> element it will look like following output.

Horizontal navigation bar (splitted)

navigation bar - changing alignment of link

You can also change alignment of links. For example, if you want to change service link to right position. Then set float property to right to <li> element.

Below example show the same.

<a href="horizontalnav.html">Services</a></li>

Output:-

Adding borders to navigation links

If you want to split the links, add border to the right side of all link. Use border-right property to add borders at right.

For example,

Write this border-right property in li selector.

li{

list-style-type:none;

display:inline-block;

padding:15px;

border-right:2px solid grey;}

Output:-

Navigation bar with Borders

Hovering on navigation links

As you can see in some website when you hover or click on links background color sometimes darken or change. Or sometimes text color will change.

Following example show that how background color turn dark yellow when hover on link.

li:hover{

background-color:#fc0;

}

Output:-

Hover effect on navigation links

Fixed horizontal navigation bar

You can also fixed the position of navigation bar when scrolling the page.

To fix navigation bar set position property to fixed in ul selector.

Example,

In example position property specifies in ul selector. Defines overflow property to “contnt” class selector. Overflow property have assign value auto means page is scrollable when content is overflow.

<!Doctype html>
<html>
<head>
<title>Horizontal Navigation</title>
<style>
.main{
position:relative;
top:100px;
left:100px;
background-color:#c33;
height:500px;
width:700px;
}
ul{
background-color:#fc7;
position:fixed;
width:660px;
top:90px;
z-index:1;
}
li{
list-style-type:none;
display:inline-block;
padding:15px;
border-right:2px solid grey;}
a{
text-decoration:none;
font-size:16pt;
}
.contnt{
position:absolute;
top:60px;
height:400px;
overflow:auto;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<a href="horizontalnav.html">Home</a></li>
<li>
<a href="horizontalnav.html">About</a></li>
<li>
<a href="horizontalnav.html">Services</a></li>
<li>
<a href="horizontalnav.html">Contact Us</a></li>
<div class="contnt">
<h1>Horizontal navigation bar</h1>
<p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p>some text</p><p>some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p> some text</p><p>end text</p><p>end text</p>
</div>
</div>
</body>
</html>

Output:-

Fixed horizontal navigation bar

As you can see in second output image scroll bar is visible as content is overflow.

Active/current link in navigation bar

Active link inform the user on which page he or she is.

To make link active using css add an active class to li element or anchor element and add pseudo selector :hover with li selector. And finally specify background color.

Example

Add class "active" Home (<li class="active">

<a href="horizontalnav.html">Home</a></li>)

In example background color of home is change to red and another link color is blue (when hover on link) .

.active{

background-color:#f00;}

li:hover:not(.active){

background-color:#05f;}

Output:-

Active link in navigation bar

Navigation bar with Drop down menu

It is possible to nested links. When you click on link in navigation bar and one another box will open containing list of links. This is called drop down menu. Drop down menu provide choices for user.

In example, the "menu" link contains three other links. These links are specify under ul class "submenu".When you hover on menu link these drop down menu will display.

<html>
<head>
<title>Dropdoown Navigation</title>
<style>
ul{
position:relative;
background-color:#fcc;}
li{
display:inline-block;
list-style-type:none;
padding:15px;}
li:hover{
background-color:#fac;}
a{
text-decoration:none;
font-size:20pt;
text-align:center;}
.submenu{
position:absolute;

top;50px;
display:block;
height:auto;
width:auto;
background-color:#9cc;
}
.submenu li{
display:none;}
li:hover .submenu li{
display: inline-block;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Menu</a>
<ul class="submenu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</li>
</ul>
</body>
</html>

Output:-

Drop-down menu in horizontal navigation bar

Drop-down menu with transition and transform effect

In previous example adding transition effects with transform.

When you click on links in submenu it will slidely moves to right direction.

.submenu li{
transition:transform 2s linear;
border-radius:50%;
}
.submenu li:hover{
transform:translate(15px);
}

Output:-

Vertical navigation bar

To display vertical navigation bar just style <a> elements and set display property to block.

By default navigation link display in vertical. Look like following figure.

Now, styles these links to make vertical menu.

Following example show the simple vertical navigation bar.

<!Doctype html>
<html>
<head>
<title>vertical navigation bar</title>
<style>
.vertical{
position:fixed;
background-color:#fca;
height:500px;
width:200px;
}
ul{
position:absolute;
list-style-type:none;
}
li a{
display:block;
text-decoration:none;
padding:15px;
display:block;
width:100px;
}
</style>
</head>
<body>
<div class="main">
<div class="vertical">
<ul>
<li class="active"><a href="verticalnavi.html">Home</a></li>
<li><a href="verticalnavi.html">About</a></li>
<li class="menu"><a href="#">Services</a>
</li>
<li><a href="verticalnavi.html">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>

Output:-

Vertical navigation bar

Alignment of links in vertical navigation bar.

As you can see in output the links are not in center. To set link text in center set text-align property to center in li selector.

Example,

li{

text-align:center;

}

Output:-

If you want to display links in left set text-align property to left.

So using text-align property you can set alignment of link to left, right, center and justify.

vertical navigation bar with borders

You can also add border to navigation bar like this.

Add border property.

li a{

border:1px solid grey;}

Output:-

Vertical navigation bar with borders

Fixed Vertical navigation bar

Vertical navigation bar can also be fixed like horizontal navigation bar. Just set overflow property to auto. Also specify height of vertical navigation menu.

Example

<!Doctype html>
<html>
<head>
<title>vertical navigation bar</title>
<style>
..... 
..... 
.main{
position:relative;
height:500px;
width:699px;
background-color:#c33;
overflow:auto;}
.contnt{
position:absolute;
left:200px;
top:50px;
padding:5px;
overflow:auto;
}
</style>
</head>
<body>
<div class="main">
<div class="vertical">
<ul>
<li class="active"><a href="verticalnavi.html">Home</a></li>
<li><a href="verticalnavi.html">About</a></li>
<li class="menu"><a href="#">Services</a>
</li>
<li><a href="verticalnavi.html">Contact us</a></li>
</ul>
</div>
<div class="contnt">
<h1>Fixed Vertical Navigation bar</h1>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
</div>
</div>
</body>
</html>

Output:-

Fixed vertical navigation bar

In output thin scroll bar is displayed. But in left vertical navigation bar remains fixed.

Vertical navigation bar with Drop down menu

Like horizontal navigation you can also add drop down menu in vertical navigation bar.

Following example describes that how add drop down menu in vertical navigation bar.

<!Doctype html>
<html>
<head>
<title>vertical navigation bar</title>
<style>
..... 
..... 
.submenu li{
display:none;
position:relative;
width:auto;
text-align:left;
}
li:hover .submenu li{
display:block;
background-color:#fea;
}
.menu:hover{
display:block;
height:170px;}
</style>
</head>
<body>
<div class="main">
<div class="vertical">
<ul>
<li class="active"><a href="verticalnavi.html">Home</a></li>
<li><a href="verticalnavi.html">About</a></li>
<li class="menu"><a href="#">Services</a>
<ul class="submenu">
<li><a href="#">home delievery</a></li>
<li><a href="#">Repair</a></li>
</ul>
</li>
<li><a href="verticalnavi.html">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>

Output:-

Vertical navigation bar with Drop down menu

Here is complete code of vertical navigation bar.

<!Doctype html>
<html>
<head>
<title>vertical navigation bar</title>
<style>
.vertical{
position:fixed;
background-color:#fca;
height:500px;
width:200px;
}
ul{
position:absolute;
list-style-type:none;
}
li a{
display:block;
text-decoration:none;
padding:15px;
display:block;
width:100px;
border:1px solid grey;
}
li{
text-align:center;
}
li:hover{
background-color:#ccc;}
.active{background-color:#0c0;}
.main{
position:relative;
height:500px;
width:699px;
background-color:#c33;
overflow:auto;}
.contnt{
position:absolute;
left:200px;
top:50px;
padding:5px;
overflow:auto;
}
.submenu li{
display:none;
position:relative;
width:auto;
text-align:left;
}
li:hover .submenu li{
display:block;
background-color:#fea;
}
.menu:hover{
display:block;
height:170px;}
</style>
</head>
<body>
<div class="main">
<div class="vertical">
<ul>
<li class="active"><a href="verticalnavi.html">Home</a></li>
<li><a href="verticalnavi.html">About</a></li>
<li class="menu"><a href="#">Services</a>
<ul class="submenu">
<li><a href="#">home delievery</a></li>
<li><a href="#">Repair</a></li>
</ul>
</li>
<li><a href="verticalnavi.html">Contact us</a></li>
</ul>
</div>
<div class="contnt">
<h1>Fixed Vertical Navigation bar</h1>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p>
<p>This is example of fixed vertical navigation bar. This paragraph is  scrollable.</p></div>
</div>
</body>
</html>

Conclusion:-

Mainly web developer uses horizontal navigation bar for navigation bar design before the use of mobile, iPad (small devices). Vertical navigation bar is useful for small devices when list of navigation links are in large numbers.