How to Make a Side Navigation Bar in ReactJS

A simple project for React beginners

Pre-requisites

• Code Editor (Visual Studio Code)
• Nodejs installed
• Basic Understanding Of React’s Props and State

Getting Started

`ReactJS Illustration

Create a React app

If you haven’t installed React before, you have to install it globally by running this in a command terminal

npm install -g create-react-app

After that, simply install an app by running these commands

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

Credit: ReactJs handbook by Flaviocopes

This will start the app on http://localhost:3000/

In src > App.js

Delete everything in the return parentheses for now.

Credit: ReactJs handbook by Flaviocopes

Creating The Navbar

Create a file in your src folder and name it SideNav, this is usually how files are named when working with React. Then copy and paste the code:

import React from ‘react’;
const SideNav = (props) => {
return (
<div className=”sidenav”>
   <a href=”#section”>About</a>
   <a href=”#section”>Services</a>
   <a href=”#section”>Clients</a>
   <a href=”#section”>Contact</a>
</div>
 );
};
export default SideNav;

Explanation:

This is a functional Component, it will have our Navbar details. React works by breaking parts of a web page into different components we can create and work on separately and later import into our main file, i.e. App.js

In the return parentheses, you will see HTML syntax, if you do not already know by now this called JSX. It looks like HTML but it has some JavaScript embedded into it.

React will process the JSX and it will transform it into JavaScript that the browser will be able to interpret. There are a few differences between HTML and JSX you’ll see in this article.

So far our navbar doesn’t look good (you won’t see it yet, that’s okay) and that means we have to call CSS. We can either do inline styling or use a CSS file. I will do both because for the tutorial I need inline styling but I would want to show you how to use a CSS file.

Styling

This is the first set of styles we will work with:

height: 100%;  width: 25%;  position: fixed; z-index: 1; top: 0; left: 0; background-color:#232323; transition: .5s ease; overflow-x: hidden; padding-top: 20px; display: flex; flex-direction: column; align-items: center;

In App.js

You will see

import './App.css'

In React, this is how you import your css files. So locate App.css in src directory, delete everything and add the styles above to a class of sidenav except width and padding-top. We would use inline styling for this. If you’ve noticed in our SideNav JSX, class is replaced with className this is one of the difference between HTML and JSX.

Another is when we use inline styling:

HTML:

<div style=’width:25%; padding-top: 20px’> … </div>

JSX:

<div style={{ width: ‘25%’, paddingTop: ‘20px’ }}></div>

Notice the placement of apostrophe and how styles with hyphen are changed to camelCase. This goes for styles like background-color or margin-top.

Applying Knowledge Of Props.

Props: Functional Components can receive arguments like in JavaScript functions and they are called props. For instance if our SideNav add this code:

<a href=’#section’>{props.name}</p>

Visual Studio Code Unyime

Line 3: We import SideNav

Line 5: In the App’s function parentheses add props, state.

Line 11: we call out the component in this format

<componentName/>

Remember we passed {props.name} earlier and so the name in App js will be taken and used in its place. And now our navbar is done and looks like this we import SideNav and then on line 11 we call out the component in this format

<componentName name=’Jonathan’/>.

Adding Functionality

Now that we’re done styling, it’s time to add functionality to our navbar, a button that when clicked opens it and one that closes it. Go back to your SideNav.js and for the width change it to props.width i.e.

style={{width: props.width}}

you can call it in App.js component but that’s not what we will do else it will remain static. To make it dynamic when you call it in App.js just write wid in the curly braces i.e

<SideNav = {wid}/>

Using State

What we just did is to say that the value of the width will come from a state called wid. So let’s create the state, on line 1 import useState by changing the code to this:

import React, {useState} from ‘react’

Then in our function, before return create a useState called wid like this:

const [wid, setWid] = useState(‘0%’);

This means we have set the width of our side nav to zero and so we cannot see it anymore.

Note: The setWid is a function that can be used to manipulate the value of wid

In our return, create a button inside the div before the SideNav Component and set it’s on click function to openSidenav, this function is what we will use to open the sideNav but at the moment will give an error because we have not created the function.

<button onClick={openSidenav}>Open</button>

This is another way JSX is different from HTML, the use of camelCase for event listeners like onChange or onKeyUp

openSidenav Function

After our useState function create the openSidenav function like this:

const openSidenav = ( ) => {
   setWid(‘25%’)
}

Close Button

And if you click the open button, our navbar comes out but we do not have a way to close it.

Go to SideNav.js and before the first anchor element add a close button like this:

<button onClick={props.closeNav}>X</button>

We are using props because we can only alter the value of the width from our Apps and yes, React allows you to pass functions as props too.

In App.js

Add the closeNav to our SideNav component and then pass into it a function called closeSidenav:

<SideNav name=’Jonathan’ width={wid} closeNav={closeSidenav}/>

And then before the return create a function similar to openSidenav except with a value of 0%

const openSidenav = ( ) => {
   setWid(‘0%’)
}

And then when you click the X button, our side navigation closes, That’s all!

A shout-out and gratitude to Flavio Copes, his React Handbook has helped me immensely in learning React and even in this mini-lesson.

If you have any questions please make them through the comments, I’d be happy to help. If you have any ways to make this code better or anything to add feel free to speak up, keeping in mind that this tutorial is to help beginners understand basic React. Thank you!