How to create Vertical Navigation Bar using HTML and CSS ? - GeeksforGeeks

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. 
HTML
<!DOCTYPE html><html><head>    <title>Page Title</title>     <script src="     https://kit.fontawesome.com/a076d05399.js">    </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>
Output: 
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
chhabradhanvi
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to set space between the flexbox ?
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)