Search...

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.

It significantly improves user experience, allowing efficient navigation throughtout your app using appealing side menu components.

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

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.