How to create side navigation bar in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To create side navigation bar in React js, you have to use any SideNavigationBar package library or you have to write a custom SideNavigationBar component. It will create side navigation bar in react js.

Today, I am going to show you, how to create side navigation bar in react js.

Table of contents

• Set up the React project.
• Import necessary components.
• Create the SideNavigationBar component.

Let’s start with the first step.

Step 1: Set up the React project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import necessary components.

You have to import the react component, which you can use in your React component. and import App.css.

import React from 'react';
import "./App.css";

Step 3: Create the SideNavigationBar component.

To create a side navigation bar, You have to use an unordered list <ul> with four list items <li> inside.

function SideNavigationBar() {
  return (
    <div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  );
}

Step 4: Style the SideNavigationBar component.

Finally, we need to style our SideNavigationBar component to make it look good. Here’s some CSS that will give our SideNavigationBar component a modern and sleek look:

App.css

  div {
    height: 100%;
    width: 100px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #333;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    margin-bottom: 10px;
  }
  
  a {
    color: white;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }

ReactJS side navigation bar example.

The below code is an example of, To create a side navigation bar, you have used ul, li order. And use CSS that will give your SideNavigationBar component a modern and sleek look.

App.js

import React from 'react';
import "./App.css";

function SideNavigationBar() {
  return (
    <div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  );
}

export default SideNavigationBar;

  div {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #333;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    margin-bottom: 10px;
  }
  
  a {
    color: white;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }

Check the output of the above code example.

Here, we are provided code sandbox links for the above program create side navigation bar in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍