CSS Navigation Bar

Demo Navigation Bars:



Navigation Bars

Having easy-to-use navigation is important for any web site.The HTML menu bar design has seen an increase in usage with rise in popularity of minimalistic website design. More people are choosing simpler bar menu navigation over the more complex drop down navigations. This style of design provides the end user a simplified interface, free from clutter and distraction.

A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.

1) Vertical Navigation Bar

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it with the Editor

2) Active/Current Navigation Link

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active {
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it with the Editor

3) Horizontal Navigation Bar

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it with the Editor

4) Fixed Navigation Bar


5) Navigation Bar with Dropdown