Sampson Ovuoba for Devwares

Posted on Feb 2, 2021 • Originally published at devwares.com on Jan 22, 2021

How to create a responsive sidebar in react using bootstrap and contrast

#css #react #programming #webdev

Most websites these days are filled with lots of content and one of the ways to separate or set apart a part of the website is by using sidebars. Sidebars can be used to show different supplementary information such as social media links, navigational links, and ads.

Today, we’ll be creating a sidebar in react using a react library knows as Contrast. Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

Prerequisites

The Sidebar would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

Basic React Knowledge
Basic Bootstrap knowledge
NPM installed

The sidebar that we will be building is pictured below.

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

node -v

This should show you the current version of node you have installed on your machine.

If you don’t have nodejs installed, download it here.

Installing node also installs npm on your PC but you can still confirm using npm -v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

npx create-react-app sidebar-app

I named the project sidebar-app but you can use whatever name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project

Run the following command to install CBDReact

npm install --save cdbreact

Or using Yarn

yarn add cdbreact

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Our sidebar would be making use of the Navlink component from React router, so let us install it by running the command below

npm install react-router-dom

Now run npm start to make sure that everything works well and there are no errors.

Before we proceed, let’s go ahead and wrap our app with the BrowserRouter component from react-router-dom as Navlinks can’t work outside it.

import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">

      </div>
    </Router>
  );
}

export default App;

Sidebar

Let us go ahead to create a file named sidebar.js which would contain our sidebar component. Import the various sidebar components that we’ll be using.

import React from 'react';
import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
} from 'cdbreact';
import { NavLink } from 'react-router-dom';

const Sidebar = () => {
  return (
    <div></div>
  );
};

export default Sidebar;

In the file above, we import a few things from CDBReact such as

The sidebar itself (CDBSidebar)
CDBSidebarContent which contains the main part of the sidebar
CDBSidebarFooter which is the footer of the sidebar
CDBSidebarHeader which is the header of the sidebar
CDBSidebarMenu and
CDBSidebarMenuItem

We also import NavLink from React-router

Now, let’s create the sidebar and also include the sidebar header and footer. We’ll also add some inline styles to these components to make them look good.

...

const Sidebar = () => {
  return (
    <div
      style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}
    >
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: 'inherit' }}
          >
            Sidebar
          </a>
        </CDBSidebarHeader>


        <CDBSidebarFooter style={{ textAlign: 'center' }}>
          <div
            className="sidebar-btn-wrapper"
            style={{
              padding: '20px 5px',
            }}
          >
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};

export default Sidebar;

With this, you should have something that looks like the image below. Note the Textcolor and background color props that we use to add color to the sidebar.

Lets go ahead to add the body of the sidebar. Add the following to your code:

import React from 'react';
import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
} from 'cdbreact';
import { NavLink } from 'react-router-dom';

const Sidebar = () => {
  return (
    <div
      style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}
    >
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: 'inherit' }}
          >
            Sidebar
          </a>
        </CDBSidebarHeader>

        <CDBSidebarContent className="sidebar-content">
          <CDBSidebarMenu>
            <NavLink exact to="/" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="columns">Dashboard</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/tables" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="table">Tables</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/profile" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="user">Profile page</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/analytics" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="chart-line">
                Analytics
              </CDBSidebarMenuItem>
            </NavLink>

            <NavLink
              exact
              to="/hero404"
              target="_blank"
              activeClassName="activeClicked"
            >
              <CDBSidebarMenuItem icon="exclamation-circle">
                404 page
              </CDBSidebarMenuItem>
            </NavLink>
          </CDBSidebarMenu>
        </CDBSidebarContent>

        <CDBSidebarFooter style={{ textAlign: 'center' }}>
          <div
            style={{
              padding: '20px 5px',
            }}
          >
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};

export default Sidebar;

In the code above, we used the CDBSidebar,CDBSidebarMenu,Navlink and CDBSidebarMenuItem to add some content which is mostly links to the sidebar.

Let us go ahead to import our newly created sidebar component into our app component.

import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Sidebar />
      </div>
    </Router>
  );
}

export default App;

At this point, your sidebar should look like the images below.

With this, we have successfully created our sidebar and can now use it as navigation to different parts of our website or add other content to it as required.

Multilevel Advanced Sidebar

If you want step the sidebar up a little further to include features like multilevel selection you will need the pro version of contrast to this. Get Contrast Pro here.

We use the pro sidebar the same way we use the free sidebar. After downloading the files for the contrast pro package which you can get by clicking the link above you follow this steps to get the multilevel advanced sidebar working.

Install CDBReact-pro

Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Our Multilevel Advanced Sidebar would also be making use of the Navlink component from React router that we installed above.

Now restart the server by running

npm start

to make sure that everything works well and there are no errors.

Before we proceed, let’s go ahead and wrap our app with the BrowserRouter component from react-router-dom as Navlinks can’t work outside it.

import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">

      </div>
    </Router>
  );
}
export default App;

Let us go ahead to create a file named prosidebar.js which would contain our Prosidebar component. Import the various sidebar components that we’ll be using.

import React from 'react';
import {
  CDBBadge,
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
  CDBSidebarSubmenu

} from 'cdbreact-pro';
import { NavLink } from 'react-router-dom';

const ProSidebar = () => {
  return (
    <div></div>
  );
};

export default ProSidebar;

In the file above, we import a few things from CDBReactPro such as

The sidebar itself (CDBSidebar)
CDBSidebarContent which contains the main part of the sidebar
CDBSidebarFooter which is the footer of the sidebar
CDBSidebarHeader which is the header of the sidebar
CDBSidebarMenu
CDBSidebarMenuItem and
CDBSidebarSubmenu

We also imported NavLink from React-router

Now, let’s create the sidebar and also include the sidebar header and footer. We’ll also add some inline styles to these components to make them look good like we did before.

<div
 style={{ display: "flex", height: "100vh", overflow: "scroll initial" }}>
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: "inherit" }}>
            Sidebar
          </a>
        </CDBSidebarHeader>

        <CDBSidebarFooter style={{ textAlign: "center" }}>
          <div
            style={{
              padding: "20px 5px",
            }}>
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>

Let’s go ahead and add the body(content) of the sidebar to it. Below is what our code should look like after this:

import React from "react";
import {
  CDBBadge,
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
  CDBSidebarSubMenu,
} from "cdbreact-pro";
import { NavLink } from "react-router-dom";

const Sidebar = () => {
  return (
    <div
      style={{ display: "flex", height: "100vh", overflow: "scroll initial" }}>
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: "inherit" }}>
            Sidebar
          </a>
        </CDBSidebarHeader>

        <CDBSidebarContent>
          <CDBSidebarMenu>
            <CDBSidebarMenuItem
              suffix={
                <CDBBadge color="danger" size="small" borderType="pill">
                  new
                </CDBBadge>
              }
              icon="th-large">
              Dashboard
            </CDBSidebarMenuItem>
            <CDBSidebarMenuItem
              icon="sticky-note"
              suffix={
                <CDBBadge color="danger" size="small" borderType="pill">
                  new
                </CDBBadge>
              }>
              Components
            </CDBSidebarMenuItem>
          </CDBSidebarMenu>
          <CDBSidebarMenu>
            <CDBSidebarSubMenu title="Sidemenu" icon="th">
              <NavLink exact to="/sub1" activeClassName="activeClicked">
                <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
              </NavLink>
              <NavLink exact to="/sub2" activeClassName="activeClicked">
                <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
              </NavLink>
              <NavLink exact to="/sub3" activeClassName="activeClicked">
                <CDBSidebarMenuItem>submenu 3</CDBSidebarMenuItem>
              </NavLink>
            </CDBSidebarSubMenu>
            <CDBSidebarSubMenu
              title="Sidemenu2"
              icon="book"
              suffix={
                <CDBBadge color="danger" size="small" borderType="pill">
                  new
                </CDBBadge>
              }>
              <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
              <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
              <CDBSidebarMenuItem>submenu 3</CDBSidebarMenuItem>
            </CDBSidebarSubMenu>
            <CDBSidebarSubMenu title="MultiLevel with Icon" icon="table">
              <CDBSidebarMenuItem>submenu 1 </CDBSidebarMenuItem>
              <CDBSidebarMenuItem>submenu 2 </CDBSidebarMenuItem>
              <CDBSidebarSubMenu title="submenu 3">
                <CDBSidebarMenuItem>submenu 3.1 </CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 3.2 </CDBSidebarMenuItem>
                <CDBSidebarSubMenu title="subnt">
                  <CDBSidebarMenuItem>submenu 3.3.1 </CDBSidebarMenuItem>
                  <CDBSidebarMenuItem>submenu 3.3.2 </CDBSidebarMenuItem>
                  <CDBSidebarMenuItem>submenu 3.3.3 </CDBSidebarMenuItem>
                </CDBSidebarSubMenu>
              </CDBSidebarSubMenu>
            </CDBSidebarSubMenu>
          </CDBSidebarMenu>
        </CDBSidebarContent>

        <CDBSidebarFooter style={{ textAlign: "center" }}>
          <div
            style={{
              padding: "20px 5px",
            }}>
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};

export default Sidebar;

In the code above, you would notice the addition of the CDBSidebarSubMenu which adds submenus that can be nested to the sidebar.

Let us now go ahead to import our newly created sidebar component into our app component.

import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Sidebar />
      </div>
    </Router>
  );
}

export default App;

Your sidebar should now look and work like the gif below:

Thats it we have successfully created our Multilevel advanced sidebar with submenus and can use it for navigation on our projects.

Resources

CDBReact Sidebar Docs

Link to code on github

Get Contrast Pro

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro