Sidebar

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.

Sidebar example

import React from "react";
import { CDBSidebar, CDBSidebarHeader, CDBSidebarMenuItem, CDBSidebarContent, CDBSidebarMenu, CDBSidebarSubMenu, CDBSidebarFooter, CDBIcon, CDBBadge, CDBContainer } from "cdbreact";
const Sidebar = () => {
  return (
    <CDBContainer>
          <CDBSidebar
            textColor="#fff"
            backgroundColor="#000"
          >
            <CDBSidebarHeader
              prefix={
              <CDBIcon
                icon="bars"
                size="lg"
                />
              }
          >
                Contrast
            </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>
    </CDBContainer>
  );
};
export default  Sidebar;

API

In this section you will find advanced information about the Sidebar component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Sidebar Import Statement

You need to import the proper components first.

import { CDBSidebar, CDBSidebarHeader, CDBSidebarMenuItem, CDBSidebarContent, CDBSidebarMenu, CDBSidebarSubMenu, CDBSidebarFooter, CDBIcon, CDBBadge, CDBContainer } from "cdbreact";

API Reference: Contrast Sidebar Properties

The table below shows the configuration options of the CDBSidebar component.

API Reference: Contrast CDBSidebarMenuItem Properties

The table below shows the configuration options of the CDBSidebarMenuItem component.

API Reference: Contrast CDBSidebarSubMenu Properties

The table below shows the configuration options of the CDBSidebarSubMenu component.