Navigation Bars – CSS


title: Navigation Bars

Navigation Bars

Navigation bars are a very important element to any website. They provide the primary method of navigation by presenting a list of links to a user. There are many methods to creating a navigation bar. The easiest way to create a navigation bar is to use an unordered list and style it with CSS.

Navigation Bars are mostly made up of <ul> lists that are horizontally arranged and styled.

While styling the navigation bars, it’s common to remove the extra spacing created by the <ul> and <li> tags as well as the bulletpoints that are automatically inserted:

list-style-type: none; margin: 0px; padding: 0px;

Example:

There are two parts to any navigation: the HTML and the CSS. This is just a quick example.

<nav class="myNav"> <!-- Any element can be used here --> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
/* Define the main Navigation block */ .myNav { display: block; height: 50px; line-height: 50px; background-color: #333; } /* Remove bullets, margin and padding */ .myNav ul { list-style: none; padding: 0; margin: 0; } .myNav li { float: left; /* Or you can use display: inline; */ } /* Define the block styling for the links */ .myNav li a { display: inline-block; text-align: center; padding: 14px 16px; } /* This is optional, however if you want to display the active link differently apply a background to it */ .myNav li a.active { background-color: #3786E1; }

More Information:

More Navigation Examples: W3Schools

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.