How to create a responsive React Bootstrap Sidebar
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.
Setup
First, check that you have a 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 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.
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 react-bootstrap sidebar would be using 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. The BrowserRouter
allows our webpage to create Nav links.
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 sidebarCDBSidebarFooter
which is the footer of the sidebarCDBSidebarHeader
which is the header of the sidebarCDBSidebarMenu
which is the sidebar menuCDBSidebarMenuItem
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.
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:
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.
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 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.
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 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.
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 sidebarCDBSidebarFooter
which is the footer of the sidebarCDBSidebarHeader
which is the header of the sidebarCDBSidebarMenu
which is the sidebar menuCDBSidebarMenuItem
which is the items that will be found on the sidebar menu andCDBSidebarSubmenu
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.
<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="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.
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:
That's it, we have successfully created our Multilevel advanced sidebar with submenus and can use it for navigation on our projects.
Resources
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.
Related Posts
Comments
...