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.
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 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.
- How to use Top Navigation with Left Navigation Bar using Bootstrap ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to align a logo image to center of navigation bar using HTML and CSS ?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to make whole area of a list item in navigation bar is clickable using CSS ?
- jQuery | Vertical Dot Navigation Plugin
- Create a Sticky Social Media Bar using HTML and CSS
- Create a Search Bar using HTML and CSS
- How to create a progress bar using HTML and CSS?
- Bootstrap | Navigation Bar
- Bootstrap 4 | Navigation Bar
- How to change navigation bar color in Bootstrap ?
- How to place content under fixed flexbox navigation bar ?
- New Google Site Navigation Bar
- HTML & CSS | Tabindex attribute & Navigation bars
- How to Create Navigation Links using HTML5 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.