Search...

Sidebar

React Bootstrap 5 Sidebar

React Bootstrap 5 Sidebar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.

Thanks to CDB you can easily implement Sidebar in your own projects, by using one of various, alluring Side Menus.

Navigation on the left is a live demo of Sidebar.

Importing the React Bootstrap 5 Sidebar Component

To use the Contrast React Bootstrap 5 Sidebar component, you import CDBSidebar into your project.

js
import { CDBSidebar } from 'cdbreact';

Alongside the CDBSidebar component we also import other Contrast Bootstrap Components, these components are the CDBSidebarContent component to hold the content in your sidebar, the CDBSidebarHeader component for your sidebar header, the CDBSidebarMenu component for grouping menu items, the CDBSidebarMenuItem component this represents an item in your sidebar menu, and the CDBSidebarFooter component, this is your sidebar footer.

js
import {
CDBSidebar,
CDBSidebarHeader,
CDBSidebarMenuItem,
CDBSidebarContent,
CDBSidebarMenu,
CDBSidebarSubMenu,
CDBSidebarFooter,
} from 'cdbreact';

Default Sidebar

Here is a default example of a sidebar

The CDBSidebarHeader component takes in an optional prefix prop, this object prop indicates what element will indicate the toggle for the sidebar, in this case, an icon element.

To have icons nested in your CDBSidebarMenuItem, use the icon prop.

Contrast
import React from 'react';
import {
CDBSidebar,
CDBSidebarContent,
CDBSidebarHeader,
CDBSidebarMenu,
CDBSidebarMenuItem,
CDBSidebarFooter,
} from 'cdbreact';
const SideBar = () => {
return (
<CDBSidebar>
<CDBSidebarHeader prefix={<i className="fa fa-bars" />}>Contrast</CDBSidebarHeader>
<CDBSidebarContent>
<CDBSidebarMenu>
<CDBSidebarMenuItem icon="th-large">Dashboard</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="sticky-note">Components</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="credit-card" iconType="solid">
Metrics
</CDBSidebarMenuItem>
</CDBSidebarMenu>
</CDBSidebarContent>
<CDBSidebarFooter style={{ textAlign: 'center' }}>
<div
className="sidebar-btn-wrapper"
style={{padding: '20px 5px'}}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
);
};
export default Sidebar;

Contrast Light Sidebar

You can configure your CDBSidebar to take in a textColor prop which defines the color of texts in the sidebar, it also takes in a backgroundColor prop which defines the background color of your sidebar.

Contrast Light Mode
import React from 'react';
import {
CDBSidebar,
CDBSidebarContent,
CDBSidebarHeader,
CDBSidebarMenu,
CDBSidebarMenuItem,
CDBSidebarFooter,
} from 'cdbreact';
const SideBar = () => {
return (
<CDBSidebar textColor="#333" backgroundColor="#f0f0f0">
<CDBSidebarHeader prefix={<i className="fa fa-bars" />}>
Contrast Light Mode
</CDBSidebarHeader>
<CDBSidebarContent>
<CDBSidebarMenu>
<CDBSidebarMenuItem icon="th-large">Dashboard</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="sticky-note">Components</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="chart-line" iconType="solid">
Metrics
</CDBSidebarMenuItem>
</CDBSidebarMenu>
</CDBSidebarContent>
<CDBSidebarFooter style={{ textAlign: 'center' }}>
<div
className="sidebar-btn-wrapper"
style={{padding: '20px 5px'}}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
);
};
export default Sidebar;

Sidebar with Badges

Lets Add Badges to our Sidebar

In this tutorial we use the CDBBadge for the badges in our sidebar,

With Badges
import React from 'react';
import {
CDBSidebar,
CDBSidebarHeader,
CDBSidebarMenuItem,
CDBSidebarContent,
CDBSidebarMenu,
CDBSidebarSubMenu,
CDBSidebarFooter,
CDBBadge,
CDBContainer,
} from 'cdbreact';
const Sidebar = () => {
return (
<CDBSidebar textColor="#fff" backgroundColor="#333">
<CDBSidebarHeader prefix={<CDBIcon icon="bars" size="lg" />}>
With Badges
</CDBSidebarHeader>
<CDBSidebarContent>
<CDBSidebarMenu>
<CDBSidebarMenuItem
suffix={
<CDBBadge color="danger" size="small" borderType="pill">
pro
</CDBBadge>
}
icon="th-large"
>
Dashboard
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="sticky-note" suffix={<CDBBadge>4</CDBBadge>}>
Components
</CDBSidebarMenuItem>
</CDBSidebarMenu>
</CDBSidebarContent>
<CDBSidebarFooter style={{ textAlign: 'center' }}>
<div
className="sidebar-btn-wrapper"
style={{ padding: '20px 5px'}}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
)
export default Sidebar

You can use a custom component as the Header of your sidebar. Here we create a custom logo for Sidebar

BABYCARE ™
import React from 'react';
import {
CDBSidebar,
CDBSidebarHeader,
CDBSidebarMenuItem,
CDBSidebarContent,
CDBSidebarMenu,
CDBSidebarSubMenu,
CDBSidebarFooter,
CDBBadge,
CDBContainer,
} from 'cdbreact';
const Sidebar = () => {
return (
<CDBSidebar textColor="#333" backgroundColor="#f0f0f0">
<CDBSidebarHeader prefix={<i className="fa fa-bars" />}>
<div className="container" style={{ display: 'flex', alignItems: 'center' }}>
<img
src={'https://seeklogo.com/images/B/butterfly-logo-0A00378822-seeklogo.com.png'}
alt=""
style={{ width: '30px' }}
/>
<h6 className="ms-2">BABYCARE</h6>
</div>
</CDBSidebarHeader>
<CDBSidebarContent>
<CDBSidebarMenu>
<CDBSidebarMenuItem icon="th-large">Dashboard</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="sticky-note">Components</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="chart-line" iconType="solid">
metrics
</CDBSidebarMenuItem>
</CDBSidebarMenu>
</CDBSidebarContent>
</CDBSidebar>
)
};
export default Sidebar;

Sidebar with Call to Action Button

Here we will demo how to add other custom components and styles to your Sidebar.

The CDBSidebarCTA component support two default themes; default and overlay.

With CTA

This sidebar contains a CTA component. You can add anything you want here

import React from 'react';
import {
CDBSidebar,
CDBSidebarHeader,
CDBSidebarMenuItem,
CDBSidebarContent,
CDBSidebarMenu,
CDBSidebarSubMenu,
CDBSidebarFooter,
CDBBadge,
CDBContainer,
CDBSidebarCTA,
} from 'cdbreact';
const Sidebar = () => {
return (
<CDBSidebar textColor="#fff" backgroundColor="#333">
<CDBSidebarHeader prefix={<i className="fa fa-bars" />}>With CTA</CDBSidebarHeader>
<CDBSidebarContent>
<CDBSidebarMenu>
<CDBSidebarMenuItem icon="th-large" iconSize="lg">
Dashboard
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="sticky-note" iconSize="sm">
Components
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="credit-card" iconType="solid" textFontSize="14px">
Sales
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="gamepad" iconType="solid" textFontSize="14px">
Games
</CDBSidebarMenuItem>
</CDBSidebarMenu>
</CDBSidebarContent>
<CDBSidebarCTA
theme="overlay"
text="This sidebar contains a CTA component. You can add anything you want here; text, images or a custom component"
></CDBSidebarCTA>
<CDBSidebarFooter style={{ textAlign: 'center' }}>
<div
className="sidebar-btn-wrapper"
style={{padding: '20px 5px'}}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
)
};
export default Sidebar;

Multilevel Sidebar

Pro Component

You can customize you Sidebar to have multiple submenu options

Here we see an Sidebar example with submenu. 2 levels deep.

The CDBSidebarSubMenu takes in a title and icon props.

Contrast Multi Level
import React from 'react';
import {
CDBSidebar,
CDBSidebarHeader,
CDBSidebarMenuItem,
CDBSidebarContent,
CDBSidebarMenu,
CDBSidebarSubMenu,
CDBSidebarFooter,
CDBBadge,
CDBContainer,
} from 'cdbreact';
const Sidebar = () => {
return (
<CDBSidebar textColor="#fff" backgroundColor="#333">
<CDBSidebarHeader prefix={<CDBIcon icon="bars" size="lg" />}>
Contrast Multi Level
</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">
<CDBSidebarMenuItem> submenu 1</CDBSidebarMenuItem>
<CDBSidebarMenuItem> submenu 2</CDBSidebarMenuItem>
<CDBSidebarMenuItem> submenu 3</CDBSidebarMenuItem>
</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="subnt">
<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
className="sidebar-btn-wrapper"
style={{
padding: '20px 5px',
}}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
);
};
export default Sidebar;

Custom Themed Sidebar

Pro Component

You can stylize and customize your Sidebar to fit the theme of design pattern you are trying to implement. Our components are very flexible

BABYCARE ™

Sign up Pro Here

import React from 'react';
import {
CDBSidebar,
CDBSidebarHeader,
CDBSidebarMenuItem,
CDBSidebarContent,
CDBSidebarMenu,
CDBSidebarSubMenu,
CDBSidebarFooter,
CDBBadge,
CDBContainer,
CDBSidebarCTA,
} from 'cdbreact';
const Sidebar = () => {
return (
<CDBSidebar textColor="#333" backgroundColor="#f4f4f4">
<CDBSidebarHeader prefix={<i className="fa fa-bars" />}>BABYCARE</CDBSidebarHeader>
<CDBSidebarContent>
<CDBSidebarMenu>
<CDBSidebarMenuItem icon="th-large" textFontSize="14px">
Dashboard
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="sticky-note" textFontSize="14px">
Explore
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="credit-card" iconType="solid" textFontSize="14px">
Care Products
</CDBSidebarMenuItem>
<CDBSidebarMenuItem icon="gamepad" iconType="solid" textFontSize="14px">
Fun and Games
</CDBSidebarMenuItem>
</CDBSidebarMenu>
<CDBSidebarMenu>
<CDBSidebarSubMenu title="Store" icon="shopping-bag">
<CDBSidebarMenuItem>Food </CDBSidebarMenuItem>
<CDBSidebarMenuItem>Clothes </CDBSidebarMenuItem>
<CDBSidebarSubMenu title="Accessories">
<CDBSidebarMenuItem>Fitbit</CDBSidebarMenuItem>
<CDBSidebarMenuItem>Cardio</CDBSidebarMenuItem>
<CDBSidebarSubMenu title="Tickets">
<CDBSidebarMenuItem>Counselling</CDBSidebarMenuItem>
<CDBSidebarMenuItem>Postnatal</CDBSidebarMenuItem>
<CDBSidebarMenuItem>Yoga</CDBSidebarMenuItem>
</CDBSidebarSubMenu>
</CDBSidebarSubMenu>
</CDBSidebarSubMenu>
</CDBSidebarMenu>
</CDBSidebarContent>
<CDBSidebarCTA theme="overlay" image={<Image />} text="Sign up Pro Here"></CDBSidebarCTA>
<CDBSidebarFooter style={{ textAlign: 'center' }}>
<div
className="sidebar-btn-wrapper"
style={{ padding: '20px 5px' }}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
)
};
export default Sidebar;

Using the prefix object prop we can nest the CDBIcon component to have icons in our CDBSidebarHeader.

In the CDBSidebarMenuItem component, we use the suffix object prop to put an element or component after the text. In this case the component is the CDBBadge.

API Reference: Contrast React Bootstrap Sidebar Props

This section will build on your information about the props you get to use with the Contrast React Bootstrap 5 Sidebar component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBSidebar component.

NameTypeDefaultDescriptionExample
classNamestringAdds custom classes<CDBSidebar className="myClass" ... />
tagstringdivChanges default input tag<CDBSidebar tag="input" ... />
textColorstring#fffChanges default input tag<CDBSidebar textColor="#000" ... />
backgroundColorstring#000Changes the text color<CDBSidebar backgroundColor="#fff" ... />
toggledbooleanfalsestate to show if sidebar is toggled or not<CDBSidebar toggled ... />
breakpointnumber720Defines width of veiwport when sidebar should collapse<CDBSidebar breakpoint={720} ... />
minWidthstring80pxDefines minimum width of sidebar<CDBSidebar minWidth="80px" ... />
maxWidthstring720pxDefines maximum width of sidebar<CDBSidebar maxWidth="720px" ... />

API Reference: Contrast React Bootstrap 5 SidebarMenuItem Props

The table below lists other prop options of the CDBSidebarMenuItem component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBSidebarMenuItem className="myClass" ... />
tagStringdivChanges default input tag<CDBSidebarMenuItem tag="input" ... />
iconStringAdds font-awesome icon<CDBSidebarMenuItem icon="envelope" ... />
iconClassNameStringAdds custom classes to icon element<CDBSidebarMenuItem iconClassName="custom_class" icon="envelope" ... />
activeBooleanfalseSets the menu item to active<CDBSidebarMenuItem active ... />
iconSizestringmdset size of item icon, if any<CDBSidebarMenuItem iconSize='md' ... />
textFontSizestring10pxset font size of menuitem text<CDBSidebarMenuItem textFontSize='14px' ... />

API Reference: Contrast React Bootstrap 5 SidebarSubMenu Props

The table below lists other prop options of the CDBSidebarSubMenu component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBSidebarSubMenu className="myClass" ... />
tagStringdivChanges default input tag<CDBSidebarSubMenu tag="input" ... />
iconStringAdds font-awesome icon<CDBSidebarSubMenu icon="envelope" ... />
iconClassNameStringAdds custom classes to icon element<CDBSidebarSubMenu iconClassName="custom_class" icon="envelope" ... />
activeBooleanfalseSets the menu item to active<CDBSidebarSubMenu active ... />
titlenodeSets the name of the sub menu<CDBSidebarSubMenu title="Submenu1" ... />
defaultOpenBooleanfalseRender opened Sidebar submenu at page load<CDBSidebarSubMenu defaultOpen ... />
OpenBooleanfalseSidebar sub menu toggles accordingly to this property (opens/closes on change)<CDBSidebarSubMenu Open ... />

API Reference: Contrast React Bootstrap SidebarCTA Props

The table below lists other prop options of the CDBSidebarCTA component.

NameTypeDefaultDescriptionExample
imagenodeDefine Image for the CTA component<CDBSidebarCTA image={<img src="" />} ... />
modeStringdarkChanges default input tag<CDBSidebarCTA mode="light" ... />

| text | String | div | Changes default input tag | <CDBSidebarSubMenu text="Welcome to your dashboard" ... /> |

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.