New Contrast Pro UI Kit and template with 5 admin dashboards, 23 pages and 10000+ components for $49 ($50 off)🎉
postImage

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

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


Bootstrap React Sidebar

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;

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 are mostly links 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.

Bootstrap React Sidebar


Bootstrap React Sidebar

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

Resources

CDBReact Sidebar Docs
Link to code on github

Create Stunning websites and web apps

Building different custom components in react for your web apps or websites can get very stressful. Thats 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

ad-banner

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

Comments

...