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

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.

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

• 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

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

Output: