Sidebar

Some features in this component requires CDB React Pro package.Clickhereto try it out.

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.

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.

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.

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.

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,

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

Sidebar with Custom Logo

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

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.

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.

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

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.

Name	Type	Default	Description	Example
className	string		Adds custom classes	`<CDBSidebar className="myClass" ... />`
tag	string	div	Changes default input tag	`<CDBSidebar tag="input" ... />`
textColor	string	#fff	Changes default input tag	`<CDBSidebar textColor="#000" ... />`
backgroundColor	string	#000	Changes the text color	`<CDBSidebar backgroundColor="#fff" ... />`
toggled	boolean	false	state to show if sidebar is toggled or not	`<CDBSidebar toggled ... />`
breakpoint	number	720	Defines width of veiwport when sidebar should collapse	`<CDBSidebar breakpoint={720} ... />`
minWidth	string	80px	Defines minimum width of sidebar	`<CDBSidebar minWidth="80px" ... />`
maxWidth	string	720px	Defines 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.

Name	Type	Default	Description	Example
className	String		Adds custom classes	`<CDBSidebarMenuItem className="myClass" ... />`
tag	String	div	Changes default input tag	`<CDBSidebarMenuItem tag="input" ... />`
icon	String		Adds font-awesome icon	`<CDBSidebarMenuItem icon="envelope" ... />`
iconClassName	String		Adds custom classes to icon element	`<CDBSidebarMenuItem iconClassName="custom_class" icon="envelope" ... />`
active	Boolean	false	Sets the menu item to active	`<CDBSidebarMenuItem active ... />`
iconSize	string	md	set size of item icon, if any	`<CDBSidebarMenuItem iconSize='md' ... />`
textFontSize	string	10px	set 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.

Name	Type	Default	Description	Example
className	String		Adds custom classes	`<CDBSidebarSubMenu className="myClass" ... />`
tag	String	div	Changes default input tag	`<CDBSidebarSubMenu tag="input" ... />`
icon	String		Adds font-awesome icon	`<CDBSidebarSubMenu icon="envelope" ... />`
iconClassName	String		Adds custom classes to icon element	`<CDBSidebarSubMenu iconClassName="custom_class" icon="envelope" ... />`
active	Boolean	false	Sets the menu item to active	`<CDBSidebarSubMenu active ... />`
title	node		Sets the name of the sub menu	`<CDBSidebarSubMenu title="Submenu1" ... />`
defaultOpen	Boolean	false	Render opened Sidebar submenu at page load	`<CDBSidebarSubMenu defaultOpen ... />`
Open	Boolean	false	Sidebar 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.

Name	Type	Default	Description	Example
image	node		Define Image for the CTA component	`<CDBSidebarCTA image={<img src="" />} ... />`
mode	String	dark	Changes default input tag	`<CDBSidebarCTA mode="light" ... />`

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.

Tab

EditableTable