🤩
Windframe Import update is finally here!

Sidebar

Bootstrap 5 Sidebar

The Bootstrap 5 Sidebar is a vertical navigation component that is fully customized to contain icons, dropdown, avatars and Call to action buttons in addition to typical text links.

By 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 categorization, essential for more significant projects.

Thanks to CDB, you can quickly implement Sidebar in your projects using different, alluring Side Menus. It significantly improves User Experience due to its clarity and simplicity. It allows you to quickly move through little apps as well as large platforms. The ability to incorporate multiple links allows you to perform more extensive content classification, which is almost necessary in larger applications.

You can quickly add Sidebar in your own projects with Contrast Design Bootstrap by utilizing one of the many attractive Side Menus.

Let's go through the various examples and implementation of the sidebar.

Default Sidebar

Contrast
<div class="sidebar" role="cdb-sidebar">
<div class="sidebar-container">
<div class="sidebar-header">
<a class="sidebar-brand">Contrast</a>
<a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
</div>
<div class="sidebar-nav">
<div class="sidenav">
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-th-large sidebar-icon sidebar-icon-lg"></i>
<span>Dashboard</span>
<div class="suffix">
<div class="badge rounded-pill bg-danger">new</div>
</div>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-sticky-note sidebar-icon"></i>
<span>Components</span>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-sticky-note sidebar-icon"></i>
<span>Bootstrap</span>
</div>
</a>
</div>
<div class="sidebar-footer">Sidebar Footer</div>
</div>
</div>
</div>

Light Sidebar

With the color html attribute we can customize the theme of our sidebar. Currently we have support for only gray and dark themes.

Contrast Light
<div class="sidebar" role="cdb-sidebar" color="white">
<div class="sidebar-container">
<div class="sidebar-header">
<a class="sidebar-brand">Contrast Light</a>
<a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
</div>
<div class="sidebar-nav">
<div class="sidenav">
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-th-large sidebar-icon sidebar-icon-lg"></i>
<span>Dashboard</span>
<div class="suffix">
<div class="badge rounded-pill bg-danger">new</div>
</div>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-sticky-note sidebar-icon"></i>
<span>Components</span>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-sticky-note sidebar-icon"></i>
<span>Bootstrap</span>
</div>
</a>
</div>
<div class="sidebar-footer">Sidebar Footer</div>
</div>
</div>
</div>

Bootstrap Sidebar PRO

You can customize sub-levels for you sidebar with contrast bootstrap sidebar. We currently only support one level deep customization.

Multi Level
<div class="sidebar" role="cdb-sidebar" color="white">
<div class="sidebar-container">
<div class="sidebar-header">
<a class="sidebar-brand">Multi Level</a>
<a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
</div>
<div class="sidebar-nav">
<div class="sidenav">
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-th-large sidebar-icon sidebar-icon-lg"></i>
<span>Dashboard</span>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-sticky-note sidebar-icon"></i>
<span>Components</span>
</div>
</a>
</div>
<div class="sidebar-footer">
Sidebar Footer
</div>
</div>
</div>
</div>

Sidebar With CTA

You can add a CTA component to your sidebar

Multi Level

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

<div class="sidebar" role="cdb-sidebar" color="white">
<div class="sidebar-container">
<div class="sidebar-header">
<a class="sidebar-brand">With CTA</a>
<a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
</div>
<div class="sidebar-nav">
<div class="sidenav">
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-th-large sidebar-icon sidebar-icon-lg"></i>
<span>Dashboard</span>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-sticky-note sidebar-icon"></i>
<span>Components</span>
</div>
</a>
<a class="sidebar-item">
<div class="sidebar-item-content">
<i class="fa fa-bold sidebar-icon"></i>
<span>Bootstrap</span>
</div>
</a>
</div>
<div class="sidebar-cta sidebar-cta-dark">
<div class="cta-text">
This sidebar contains a CTA component. You can add anything you
want here.
</div>
</div>
<div class="sidebar-footer">
Sidebar Footer
</div>
</div>
</div>
</div>

Script

We add dynamicity and interactivity to our sidebar with JavaScript, we use querySelector to select an element. We then create a new sidebar object using the new keyword from CDB, passing it the element we just targeted as an argument.

Each sidebar instance can be created with the following javascript code snippet. This gives you access to the event handlers and listeners available for the sidebar.

html
<script src="/build/constrast-bootstrap-pro/js/cdb.js"></script>
<script>
const sidebar = document.querySelector('.sidebar');
new CDB.Sidebar(sidebar);
</script>

Classes and Events Reference: Contrast Bootstrap Sidebar

This section will build on your information about the classes and events that makes Contrast Bootstrap sidebar tick. You will find out what they do, their default values, and how you would use them in your code.

The table below lists css classes options for Contrast Bootstrap Sidebar

NameDescription
sidebarDefines styles for the sidebar
sidebar-containerDefines styles for the container of the sidebar content
sidebar-headerDefines styles for the sidebar header
sidebar-togglerDefines styles for the sidebar toggler
sidebar-brandDefines styles for the sideba brand or text
sidebar-navDefines styles for the sidebar navigation. The sidebar navigation is the container for all the links
sidebar-itemDefines styles for all the links in the sidebar
sidebar-dropdownDefines styles for the sidebar dropdown
sidebar-iconDefines styles for the sidebar icons
sidebar-submenuDefines sidebar for the sidebar submenu container

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast