Skip to main content

CSS Navigation Bar

A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website.

A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links. It can be placed below the logo or the header, but it should always be placed before the main content of the webpage.

It is important for a website to have easy-to-use navigation. It plays an important role in the website as it allows the visitors to visit any section quickly.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

<ul>  
	<li><a href="home.html">Home</a></li> 
	<li><a href="contact.html">Contact</a></li>  
	<li><a href="about.html">About</a></li>  
</ul>

Now let's remove the bullets and the margins and padding from the list:

ul {  
	list-style-type:  none;  
	margin:  0;  
	padding:  0;  
}

Table of Contents