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

html

<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.

html

<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>

Submenu Sidebar

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

html

<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

html

<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

Name	Description
`sidebar`	Defines styles for the sidebar
`sidebar-container`	Defines styles for the container of the sidebar content
`sidebar-header`	Defines styles for the sidebar header
`sidebar-toggler`	Defines styles for the sidebar toggler
`sidebar-brand`	Defines styles for the sideba brand or text
`sidebar-nav`	Defines styles for the sidebar navigation. The sidebar navigation is the container for all the links
`sidebar-item`	Defines styles for all the links in the sidebar
`sidebar-dropdown`	Defines styles for the sidebar dropdown
`sidebar-icon`	Defines styles for the sidebar icons
`sidebar-submenu`	Defines 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.

Stepper

Navbar