Sidebar menus are a great feature for the user interfaces of web and mobile applications. Not only do sidebar menus increase the functionality of an app, they also improve the user experience overall by making navigation easy!

In this tutorial, we’ll learn how you can make an amazing sidebar menu from scratch in React. Let’s get started!

Setting up the project

First, make sure that you have the latest version of Node.js installed on your local machine. Run the following command to set up a React project in your directory:

Npx create-react-app my-app

Currently, our folder structure looks like the image below:

Let’s delete some unnecessary files so that our src folder will look like the image below:

Currently, App.css has no styles, but we’ll add those in later! Our App.js and index.js files look like the following two code blocks, respectively:

import ‘./App.css’;

function App() {
return (
<div>
<p>React App</p>
</div>
);
}

export default App;

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’)
);

Now, let’s run our React app with the following command:

yarn start

You should receive the following output:

Creating a sidebar menu

To create a sidebar menu, we’ll have to install the following libraries:

npm install react-icons react-router-dom –save

Let’s create a new folder named components.js. Inside, we’ll create a file called SideMenuData.js.

The React Icons library offers elements for creating beautiful and personalized interfaces. In SideMenuData.js, we’ll add the following JavaScript object, which we’ll use to populate our side menu with elements from React Icons:

import React from ‘react’;
import * as FaIcons from ‘react-icons/fa’;
import * as AiIcons from ‘react-icons/ai’;
import * as IoIcons from ‘react-icons/io’;

export const SidebarData = [
{
title: ‘Home’,
path: ‘/’,
icon: <AiIcons.AiFillHome />,
cName: ‘nav-text’
},
{
title: ‘Reports’,
path: ‘/reports’,
icon: <IoIcons.IoIosPaper />,
cName: ‘nav-text’
},
{
title: ‘Products’,
path: ‘/products’,
icon: <FaIcons.FaCartPlus />,
cName: ‘nav-text’
},
];

Now that we have our data ready, let’s create a folder called Navbar.js. Make sure to import Navbar.js in App.js. Add the following code to Navbar.js:

import React, { useState } from ‘react’;
import * as FaIcons from ‘react-icons/fa’;
import { Link } from ‘react-router-dom’;

function Navbar() {
const [sidebar, setSidebar] = useState(false);

const showSidebar = () => setSidebar(!sidebar);

return (
<>
<div className=’navbar’>
<Link to=’#’ className=’menu-bars’>
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
</>
);
}

export default Navbar;

We’ll get the following output:

Currently, nothing appears in our sidebar menu because we haven’t added the sidebar’s state! Let’s add the code for our sidebar menu in our Navbar.js folder:

import React, { useState } from ‘react’;
import * as FaIcons from ‘react-icons/fa’;
import * as AiIcons from ‘react-icons/ai’;
import { Link } from ‘react-router-dom’;
import { SidebarData } from ‘./SideBarData’;

function Navbar() {
const [sidebar, setSidebar] = useState(false);

const showSidebar = () => setSidebar(!sidebar);

return (
<>
<div className=’navbar’>
<Link to=’#’ className=’menu-bars’>
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
<nav className={sidebar ? ‘nav-menu active’ : ‘nav-menu’}>
<ul className=’nav-menu-items’ onClick={showSidebar}>
<li className=’navbar-toggle’>
<Link to=’#’ className=’menu-bars’>
<AiIcons.AiOutlineClose />
</Link>
</li>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>
</>
);
}

export default Navbar;

In the code block above, we used the map function to create sidebar elements using the data in SideBarData.js.

The state variable and the conditional check allow us to toggle between showing and hiding our sidebar. Currently, the toggle feature doesn’t work because we haven’t added any CSS yet. Out output will look like the image below:

Adding styles

Create a new file named Navbar.css and store it in the components.js directory. Let’s add the following styles to it:

.navbar {
background-color: rgb(183, 247, 181);
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}

.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}

.nav-menu {
background-color: rgb(183, 247, 181);
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}

.nav-menu.active {
left: 0;
transition: 350ms;
}

.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}

.nav-text a {
text-decoration: none;
color: black;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}

.nav-text a:hover {
background-color: #ffffff;
}

.nav-menu-items {
width: 100%;
}

.navbar-toggle {
background-color: rgb(183, 247, 181);
width: 100%;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}

span {
margin-left: 16px;
}

In the nav-menu and nav-menu.active classes, respectively, we add code to show and hide the sidebar. We set the left attribute in nav-menu.active to 100px, which will hide the sidebar menu. When our state changes, the class is set to nav-menu.active, changing the left attribute to 0 and displaying the sidebar menu.

Now, save these changes, and you’ll receive the following output:

While hovering, we’ll see a white background:

Lastly, we need to link our items to their specific pages.

Adding navigation

Let’s create a new folder and name it pages. We’ll create and add the following new files to it.

Home.js directs the user to the homepage:

import React from ‘react’;

function Home() {
return (
<div className=’home’>
<h1>Home</h1>
</div>
);
}

export default Home;

Products.js directs the user to the Products page:

import React from ‘react’;

function Products() {
return (
<div className=’products’>
<h1>Products</h1>
</div>
);
}

export default Products;

Reports.js directs the user to the Reports page:

import React from ‘react’;

function Reports() {
return (
<div className=’reports’>
<h1>Reports</h1>
</div>
);
}

export default Reports;

The final file structure looks like the image below:

In the image above, the pages represented are the React components necessary for adding navigation using the react-navigation library. Everything is done in the root component.

Next, let’s go to our App.js folder and import the following code:

import { BrowserRouter as Router, Switch, Route } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import Reports from ‘./pages/Reports’;
import Products from ‘./pages/Products’;

BrowserRouter is the high-level component for all the routes. Switch wraps the child routes for enabling navigation around the application. Now, we have our final App.js file:

import React from ‘react’;
import ‘./App.css’;
import Navbar from ‘./components/Navbar’;
import { BrowserRouter as Router, Switch, Route } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import Reports from ‘./pages/Reports’;
import Products from ‘./pages/Products’;

function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path=’/’ exact component={Home} />
<Route path=’/reports’ component={Reports} />
<Route path=’/products’ component={Products} />
</Switch>
</Router>
</>
);
}

export default App;

If you click on any of the sidebar menu items, you’ll be directed to its respective page, as seen in the screenshot below:

Let’s add some final touches to our styles! Add the following code to our App.css file:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.home,
.reports,
.products {
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
font-size: 3rem;
}

Voila! You have successfully created a beautiful sidebar menu from scratch in React.

Conclusion

In this tutorial, we learned how to build a sidebar component from scratch in React. The information in this tutorial is useful if you want to improve the user interface of your React applications. You should feel free to customize this approach so it is best suited for your needs.

I hope you enjoyed this tutorial!

The post Create a sidebar menu in React from scratch appeared first on LogRocket Blog.