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

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 known 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 the node installed. To do this, run the following command in your terminal.

node -v

This should show you the current version of the 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 the 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;

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 text color and background color props that we use to add color to the sidebar.

Let's 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 that is mostly linked to the sidebar.

Let us go ahead to import ort 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.

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 page templates 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 and 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

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

Prerequisites

Setup

Install CDBReact

Sidebar

How to create a sidebar react-bootstrap

Create Stunning Websites and Web Apps

Resources