How to Create a Responsive Sidebar in React Using Bootstrap

Jenna Walter

4 years ago

Many websites are packed with content, and among the best ways to set apart or stand out from your site is through the applications of sidebars. These sidebars are utilized to showcase various kinds of supplementary information like ads, navigational links, as well as social media links.

Today, I will be making a sidebar in reacting with the use of bootstrap. Bootstrap is an open-source and free CSS framework bound for responsive as well as mobile-first front-end website development. It has JavaScript and CSS-based style templates for forms, navigation, typography, button as well as other components of the interface. Bootstrap’ components are reusable and ideal for developing responsive, mobile-first websites as well as web applications.

What is Bootstrap Sidebar?

Bootstrap sidebar refers to an extremely powerful as well as customizable responsive navigation part for all kinds of vertical navigations. This comes with integrated support for navigation, branding, and a whole lot more.

How does it work?

Here are the important things you have to know prior to starting with your bootstrap sidebar:

Sidebar needs wrapping

Sidebar is concealed by default. Pressure it to be revealed by including sidebar{-sm|-md|-lg|-xl}-show or .sidebar-show to the .app.

Make sure accessibility with the use of a <nav> constituent or, when utilizing a more broad and basic element like <div>, put in role= “navigation” to .sidebar-nav to openly recognize and make it out as a marker area for assistive technologies users.

Now let’s go back to the process of creating a responsive sidebar in react using bootstrap. So, check these steps out:

Basics or Fundamentals

The sidebar ought to be made with the use of bootstrap and react. You need not have knowledge or experience of open-source and free CSS frameworks. However, the following information must be required and necessary:

Basic knowledge in bootstrap
Basic knowledge in react (react wysiwyg can be helpful)
Installed NPM

How to Setup

The first step is to install node. You can do this by running the command (node –v) within your terminal. This must reveal to you the existing type of node you’re setup on the machine. In case you do not have nodes setup, you can download it for free.

After setting up node, it is also vital to set up npm on the personal computer. However, you can confirm with the use of nmp-v. After setting up, you can start the react project. Go to your chosen directory and run it. You may use it no matter what name you want.

Install CDBReact

Your next step is to setup CDB react. You can run this common when setting it up. This sidebar will be using the Navlink from React router; therefore, let’s set it up by keying this command: npm install react-router-dom

Sidebar

Now let’s move forward to creating a file name sidebar.js that would contain a sidebar component. Bring in the sidebar’s different components, which will be making use of:

In this file, we bring in some things from React like:

Sidebar itself
Sidebar content that has sidebar’s major portion
SidebarFooter that’s the sidebar footer
SidebarHeader that’s sidebar header
SidebarMenu as well as SidebarMenuItem
Also bring in Navlink from a react-router

Let’s make the sidebar as well as also integrate the header and the footer of the sidebar. We also put in a number of inline styles and designs to these parts in order to look amazing and presentable. Note the background hue props and textcolor, which we utilize to put in shade or color to our sidebar.

Let’s move forward to putting in the sidebar body. You can put in the code as follows:

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>
  );
};

We used CDBSidebar, Navlink, CDBSidebarMenuItem, and CDBSidebarMenu to put in some content that is typically linked to the sidebar.

Now import the newly made sidebar component into the app component, and it must appear like this:

This image shows that we successfully made a sidebar. You can now utilize it as your site navigation.

Jenna Walter