How to create a side navigation menu with icons using CSS?

By IncludeHelp Last updated : November 15, 2023

Website navigation is an essential part of web design. Good navigation'will allow visitors to search your 'site'for longer, also it contributes to the user experience by presenting an enjoyable, intuitive layout while increasing ease of use, which allows users to access the information they want as quickly as possible. In this tutorial we'll create a side navigation menu with icons using CSS, creating all this manually can be really long method but if we'll use bootstrap pre-defined class then it is a minor task.

Side Navigation Bar

The side navigation bar is one of the common ways of arranging navigation links. We all must have seen side navigation in most of the websites. Let us see how we can create the side menu with icons.

Use Icons with Navigation Bar on a Website

There are many websites that provide us free icons, and one of them is font awesome. The website provides us with many icons some of which are free and some of them are paid icons. You can easily find any icon, you just need to write the keyword related to the icon you want and you'll get the icon.

The following are the steps to import/use icons on a webpage -

Step 1: Import CDN

The first step is to import the CDN of font awesome which is:

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

Copy this style sheet link, under <head> tag.

Step 2: Search Icons

After copying the CDN, in your code go to https://fontawesome.com/icons/location-pin?s=solid, this link and type the icon name you want to use on your web page.

Step 3: Get Icon's Code

Click on the icon and copy the code shown in the picture.

Step 4: Copy Icon's Code and Use

Copy this code, wherever you want to use your icon.

By following the above steps, you can use icons on your webpage.

Create Side Navigation Bar with Icons

The following are the steps to create side navigation bar with icons:

Step 1: Arrange Links

The next step is to simply arrange the links in a div and give it a class to style it. Additionally, we'll give the icon class which I've taken from the reference website given above.

<div class="nav">
  <a href="#Home" ><i class="fa-solid fa-house-user"></i>Home</a>
  <a href="#support"><i class="fa-solid fa-handshake"></i>Support</a>
  <a href="#contactus"><i class="fa-solid fa-phone"></i>Contact us</a>
  <a href="#Aboutus"><i class="fa-solid fa-people-group"></i>About us</a>
</div>

If we don't apply any CSS our page will somehow look like this:

As no CSS is applied, so only links will be displayed.

Step 2: Add CSS

Add this CSS:

body {
  font-family: Verdana, Arial;
  background-color: lavender;
}

.nav {
  height: 100%;
  width: 180px;
  position: fixed;
  top: 0;
  left: 0;
  background-color:#006969;
  padding-top: 20px;
  box-shadow: 2px 2px gray;
}

.nav a {
  padding: 8px;
  text-decoration: none;
  color: #ccc;
  display: block;
}

.nav a:hover {
  color: #f40;
}

.nav a i{
/*to give margin after icons*/
margin-right: 8px;
}

.container{
  left:30px;
  font-size: 25px;
}

Explanation

In the given code height is set to 100% the reason behind this is that we want to cover the height of the entire page; you can set width according to your preference.

I've used the position:fixed property, This is important here if we don't apply this property then our sidebar will scroll up when the content on the page is more. You can apply padding, margin, font-family, background-color property according to your desire.

.nav a: Class name + tag name is used to style the particular tag in a given class. Here nav is a class and a is the anchor tag. In this section, basic properties are applied which can be changed. Additionally icon class is also provided which I've taken from the reference website given above.

Example

The code to create a side navigation bar with icons using CSS is -

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
    <style>
      body {
      font-family: Verdana, Arial;
      background-color: lavender;
      }
      .nav {
      height: 100%;
      width: 180px;
      position: fixed;
      top: 0;
      left: 0;
      background-color:#006969;
      padding-top: 20px;
      box-shadow: 2px 2px gray;
      }
      .nav a {
      padding: 8px;
      text-decoration: none;
      color: #ccc;
      display: block;
      }
      .nav a:hover {
      color: #f40;
      }
      .nav a i{
      /*to give margin after icons*/
      margin-right: 8px;
      }
      .container{
      left:30px;
      font-size: 25px;
      }
    </style>
  </head>
  
  <body>
    <div class="nav">
      <a href="#Home"><i class="fa-solid fa-house-user"></i>Home</a>
      <a href="#support"><i class="fa-solid fa-handshake"></i>Support</a>
      <a href="#contactus"><i class="fa-solid fa-phone"></i>Contact us</a>
      <a href="#Aboutus"><i class="fa-solid fa-people-group"></i>About us</a>
    </div>
	
    <center>
      <h1>Main content</h1>
      <div class="container">
        <p>
          Main content will be displayed here
        </p>
      </div>
    </center>
	
  </body>
  
</html>

Output

The output of the above example is:

side navigation menu with icons using CSS

How to create a zebra striped table with CSS?

How to add an inline CSS with any HTML element?