Create a sidebar menu in React from scratch

4 min read 1329

Creating Sidebar Menu React

Sidebar menus increase the functionality of an app and 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:

New React Project Folder Setup

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

Src Folder Updated Setup

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:

We made a custom demo for .
No really. Click here to check it out.

Run React App Yarn Start 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:

Navbar Code Output Sidebar Menu

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:

Sidebar Elements Created Output

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:

Show Hide Sidebar Code Output

While hovering, we’ll see a white background:

Hover Above Sidebar Display

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:

Final React App File Structure

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:

Sidebar Menu Products Page

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!

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Leave a Reply