How to create Vertical Navigation Bar using HTML and CSS ?

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-awsome 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>

chevron_right


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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


  • 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 vertical navigation bar, you have to style the <a> elements inside the list.

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


  • 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


  • 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.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
     <script src="
    </script>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 300px;
        background-color: #f1f1f1;
      }
      li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
      }
  
      /* Change the link color on hover */
      li a:hover {
        background-color: #fad390;
        color: #fff;
      }
      .icon {
        margin-right: 10px;
      }
  </style>
</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>

chevron_right



Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.