postImage

How to create a responsive React Bootstrap Sidebar

blogImage

By Chimdia Anyiam

Web Developer

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. As its name suggests React- Bootstrap Sidebars are usually situated at the side of a webpage, either to the right or the left. You can also add a react-bootstrap sidebar menu collapse to your project.

What is a Sidebar

Sidebars are used to provide supplementary information like ads, related posts, navigation links, etc. We have seen a lot of popular websites come to accept and inculcate this UI in their websites, some of these websites are Wikipedia, Gmail, etc.

What is Sidebar React?

A sidebar react is simply a component sidebar built with react framework technology.


In this article, we will be creating a React Bootstrap Sidebar 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.


How do I create a React Bootstrap Sidebar?

Although you may be curious as to how to create a react sidebar we are going to use contrast to create the sidebar. You can join the tutorial by downloading the package here.

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 bootstrap sidebar React that we will be building is pictured below.


React Bootstrap Sidebar

Setup

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

js
node - v;

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

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

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

js
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

js
npm install --save cdbreact

Or using Yarn

js
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 react-bootstrap sidebar would be using the Navlink component from React router, so let us install it by running the command below.

js
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. The BrowserRouter allows our webpage to create Nav links.

js
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.

js
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 which is the sidebar menu
  • CDBSidebarMenuItem which is the items that will be added to the sidebar menu.

We also import NavLink from React-router

How to create a sidebar react bootstrap

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.

js
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 add the body of the sidebar. Add the following to your code:

js
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 import our newly created sidebar component into our app component.

js
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.

React Bootstrap Sidebar


React Bootstrap Sidebar

With this, we have successfully created the sidebar and can now use it as navigation to different parts of our website or add other content to it as required. Other react-bootstrap sidebar example include the multilevel advanced sidebar.

Multilevel Advanced Sidebar

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

We use the pro-react-bootstrap 5 sidebars the same way we use the free React bootstrap 5 sidebars. After downloading the files for the contrast pro package, you can get by clicking the link above, you follow these 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.

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

Or using Yarn

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

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

Now restart the server by running npm start to ensure that everything works well and there are no errors.

How do you create the multilevel React-bootstrap sidebar?

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.

js
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.

jsx
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 which is the sidebar menu
  • CDBSidebarMenuItem which is the items that will be found on the sidebar menu and
  • CDBSidebarSubmenu which is the sidebar sub-menu.

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.


js
<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:
js
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="subnet">
<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 CDBSidebarSubMenu, which adds submenus nested to the sidebar.

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


js
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 bootstrap sidebar react should now look and work like the gif below:

Contrast Bootstrap Sidebar Pro

That's 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...