How to create Vertical Navigation Bar using HTML and CSS ?

Last Updated : 14 Sep, 2021

After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS.

Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we create the navigation bar using an HTML list item. We use font-awesome 5 icons in the navigation bar. For this, after the "title" tag we have added the "script" tag to include the font-awesome library.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://kit.fontawesome.com/a076d05399.js">
    </script>
</head>

<body>
    <ul>
        <li>
            <a href="#" class="active">
                <i class="fas fa-home icon"></i>
                Home
            </a>
        </li>
        <li><a href="#">
                <i class="fas fa-rss icon"></i>
                News
            </a>
        </li>
        <li><a href="#">
                <i class="fas fa-address-book icon"></i>
                Contact
            </a>
        </li>
        <li><a href="#"><i class="fas fa-user icon"></i>
                About
            </a>
        </li>
    </ul>
</body>

</html>

We have defined the structure of the web page using HTML. Now we need to add some style using CSS properties. First, remove the bullets and the margins and padding from the list. Now give background color and a specific width.

CSS

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    background-color: #f1f1f1;
  }
</style>

The list-style-type: none; property removes the bullets from the HTML list.
The margin: 0; and padding: 0; removes browser default margin and padding from the element.

In order to create a vertical navigation bar, you have to style the <a> elements inside the list.

CSS

<style>
  li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
  }

  /* color change on hover */
  li a:hover {
    background-color: #fad390;
    color: #fff;
  }
</style>

The display: block; property displaying the links like block elements makes the link area clickable. It allows us to specify the width (padding, margin, height, etc.)
padding: 8px 16px; Top and bottom paddings are 8px. Right and left paddings are 16px.
text-decoration: none; Remove the underline from <a> elements

CSS

<style>
  .icon {
    margin-right: 10px;
  }
</style>

margin-right:10px; It adds some margin between the text and the icons

Final code: The following is the combination of all of the above code snippets.