How To Create Vertical Navigation Menu Using HTML and CSS?

Creating a Vertical Navigation Menu

Vertical Navigation Menu or let’s say navbar in short is a type of menu that we are familiar with. These types of menu bars are often seen while visiting websites.

In this “How-To” section we have prepared a tutorial on “How To Create Vertical Navigation Menu Using HTML and CSS?”.

After reading these How-To tricks you will be able to build your own vertical navigation menu on any of your websites. You will learn the secret behind how these menus are created.

This article is for those who are complete beginners and have a basic understanding of HTML and CSS. If you are a beginner then it is absolutely great. You will have some hands-on practice.

We have divided this article into two sections i.e. Section A and Section B.

Section A covers structuring the Navigation Menu while Section B teaches you how to style the navigation menu.

Before diving straight into the tutorial section let’s have some setup.

Don’t Know the basics of HTML? Don’t worry we have prepared a step-by-step beginner guide that will help you learn the basics of HTML.

Check out this beginner guide.

A Step By Step Guide On How To Create A Simple Website – HTML Tutorial For Beginners

First, create a new folder on your computer. Now open the folder in the text editor. In our case, we will use Microsoft Visual Studio Code.

You can use any of your favorite text editors or IDE. Once you’ve opened the folder create two files named index.html and style.css inside your text editor.

Section A: Structuring the Navigation

Once you’ve completed all the necessary setup you’re ready to begin.

First open the index.html and write a code for the HTML basic structure. Inside the head tag we will include an external link for styling our document i.e. linking style.css.

We will also use font-awesome icons and a google font named Roboto in our program.

Include these code snippets inside the head tag.

<link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap"   rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">

Once you’ve added the above code snippets in the head section, create a div with class “navigation-menu” inside your body tag.

Now create an anchor tag inside the div element as mentioned in the code snippet below.

 <div class="navigation-menu">
    <a href="#" class="active"><i class="fa fa-home"></i>Home</a>
    <a href="#"><i class="fa fa-file"></i>About</a>
    <a href="#"><i class="fa fa-address-card"></i>Service</a>
    <a href="#"><i class="fa fa-image"></i>Gallery</a>
    <a href="#"><i class="fa fa-phone"></i>Contact</a>
</div>

Here is the full code snippet for you index.html page. This is how it will look once you’ve finished implementing all the above mentioned code.

If you are still confused then you can use this full code. Just copy all the code from the snippet and paste it into your index.html page.

<!DOCTYPE html>
<html>
    <head>
        <title>Vertical Navigation Bar Using HTML & CSS</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
        awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" 
        rel="stylesheet">
    </head>
    <body>
        <div class="navigation-menu">
            <a href="#" class="active"><i class="fa fa-home"></i>Home</a>
            <a href="#"><i class="fa fa-file"></i>About</a>
            <a href="#"><i class="fa fa-address-card"></i>Service</a>
            <a href="#"><i class="fa fa-image"></i>Gallery</a>
            <a href="#"><i class="fa fa-phone"></i>Contact</a>
        </div>
    </body>
</html>

Section B: Styling the Navigation Menu

Now it is time to style the navigation menu that we have just created. All the codes are written inside the style.css file.

Always remember to link both the HTML and CSS files together before writing some codes. If you forgot to link these files then you will not be able to see any changes within your program.

To link your index.html file with style.css file use this code snippet below.

<link rel="stylesheet" href="path to your css file">

In our case we will use the following the code

<link rel="stylesheet" href="style.css">

Once you’ve linked these files now you are ready to move forward. Just use this code snippet inside your style.css

body{
    padding: 0;
    margin: 0;
}

.navigation-menu {
    width: 173px;
    height: 100vh;
    background-color: #555;
}

.navigation-menu  a {
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 34px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
}

.navigation-menu a:not(:last-child){
    border-bottom: 1px solid #fff;
}

.navigation-menu a:hover{
    background-color: #444;
}

.navigation-menu > a > i {
    margin-bottom: 12px;
    font-size: 45px;
    display: block;
}

.active{
    background-color: #2375e6;
}

This is how you can create a simple vertical navigation menu for your project. Not only navigation menu but you also learned implementing font-awesome icons and google fonts in your project.

Demo : Creating Vertical Navigation Menu

If you want to see how this vertical navigation menu looks then you can see the demo of the program. Click Me.

I hope you’ve enjoyed learning this how-to tricks. If you have any queries regarding this article please feel free to leave your thoughts in the comment box below. Till then Happy Learning.

Are you looking for the best book to learn about web development? Check out this guide that we have prepared for you.

3 Best Book To Learn Web Development For Beginners

Video Tutorial On Vertical Navigation Menu