Download Hire Us Get CoreUI PRO all-access →

Bootstrap 5 Sidebar

Sidebar

Bootstrap Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

How it works

Here’s what you need to know before getting started with the sidebar:

  • Sidebar requires a wrapping .sidebar.
  • Sidebar is hidden by default on mobile devices. Force it to be shown by adding .show to the .sidebar.
  • Sidebar is shown by default on desktop devices. Force it to be hidden by adding .hide to the .sidebar.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to .sidebar-nav to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.

Supported content

Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .sidebar-header for optional header.
  • .sidebar-brand for your company, product, or project name.
  • .sidebar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .sidebar-footer for optional footer.
  • .sidebar-toggler for use with our minimizer plugin.

Examples

Below is an sidebar example that is shown by default on desktop devices.

CoreUI
html 
<div class="sidebar border-end">
  <div class="sidebar-header border-bottom">
    <div class="sidebar-brand">CoreUI</div>
  </div>
  <ul class="sidebar-nav">
    <li class="nav-title">Nav Title</li>
    <li class="nav-item">
      <a class="nav-link active" href="#">
        <i class="nav-icon cil-speedometer"></i> Nav item
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="nav-icon cil-speedometer"></i> With badge
        <span class="badge bg-primary ms-auto">NEW</span>
      </a>
    </li>
    <li class="nav-item nav-group show">
      <a class="nav-link nav-group-toggle" href="#">
        <i class="nav-icon cil-puzzle"></i> Nav dropdown
      </a>
      <ul class="nav-group-items">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item mt-5">
      <a class="nav-link" href="https://coreui.io">
        <i class="nav-icon cil-cloud-download"></i> Download CoreUI</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://coreui.io/pro/">
        <i class="nav-icon cil-layers"></i> Try CoreUI
        <strong>PRO</strong>
      </a>
    </li>
  </ul>
  <div class="sidebar-footer border-top d-flex">
    <button class="sidebar-toggler" type="button"></button>
  </div>
</div>

Narrow sidebar

Add the .sidebar-narrow class to make the sidebar narrow.

CUI
html 
<div class="sidebar sidebar-narrow border-end">
  <div class="sidebar-header border-bottom">
    <div class="sidebar-brand">CUI</div>
  </div>
  <ul class="sidebar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="nav-icon cil-speedometer"></i>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="nav-icon cil-speedometer"></i>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://coreui.io">
        <i class="nav-icon cil-cloud-download"></i>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://coreui.io/pro/">
        <i class="nav-icon cil-layers"></i>
      </a>
    </li>
  </ul>
</div>

Unfoldable sidebar

Add the .sidebar-narrow-unfoldable class to make the sidebar narrow with unfoldable on hover.

CUI
html 
<div class="sidebar sidebar-narrow-unfoldable border-end">
  <div class="sidebar-header border-bottom">
    <div class="sidebar-brand">CUI</div>
  </div>
  <ul class="sidebar-nav">
    <li class="nav-title">Nav Title</li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="nav-icon cil-speedometer"></i> Nav item
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="nav-icon cil-speedometer"></i> With badge
        <span class="badge bg-primary ms-auto">NEW</span>
      </a>
    </li>
    <li class="nav-item nav-group show">
      <a class="nav-link nav-group-toggle" href="#">
        <i class="nav-icon cil-puzzle"></i> Nav dropdown
      </a>
      <ul class="nav-group-items">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item mt-auto">
      <a class="nav-link" href="https://coreui.io">
        <i class="nav-icon cil-cloud-download"></i> Download CoreUI</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://coreui.io/pro/">
        <i class="nav-icon cil-layers"></i> Try CoreUI
        <strong>PRO</strong>
      </a>
    </li>
  </ul>
</div>

Dark sidebar

Change the appearance of sidebars with the .sidebar-dark class.

CoreUI
html 
<div class="sidebar sidebar-dark border-end">
  <div class="sidebar-header border-bottom">
    <div class="sidebar-brand">CoreUI</div>
  </div>
  <ul class="sidebar-nav">
    <li class="nav-title">Nav Title</li>
    <li class="nav-item">
      <a class="nav-link active" href="#">
        <i class="nav-icon cil-speedometer"></i> Nav item
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="nav-icon cil-speedometer"></i> With badge
        <span class="badge bg-primary ms-auto">NEW</span>
      </a>
    </li>
    <li class="nav-item nav-group show">
      <a class="nav-link nav-group-toggle" href="#">
        <i class="nav-icon cil-puzzle"></i> Nav dropdown
      </a>
      <ul class="nav-group-items">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item mt-5">
      <a class="nav-link" href="https://coreui.io">
        <i class="nav-icon cil-cloud-download"></i> Download CoreUI</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://coreui.io/pro/">
        <i class="nav-icon cil-layers"></i> Try CoreUI
        <strong>PRO</strong>
      </a>
    </li>
  </ul>
  <div class="sidebar-footer border-top d-flex">
    <button class="sidebar-toggler" type="button"></button>
  </div>
</div>

Placement

By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.

  • .sidebar-start places sidebar on the left of the viewport (shown above)
  • .sidebar-end places sidebar on the right of the viewport

JavaScript behavior

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

  • In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
  • In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
  • In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

Methods

You can create a sidebar instance with the sidebar constructor, for example:

var mySidebar = document.querySelector('#mySidebar')
var sidebar = new coreui.Sidebar(mySidebar)
Method Description
show Shows the sidebar.
hide Hides the sidebar.
toggle Toggles the sidebar to opened or closed.
getInstance Static method which allows you to get the sidebar instance associated with a DOM element. 
var sidebarNode = document.querySelector('#mySidebar')
var sidebar = coreui.Sidebar.getInstance(sidebarNode)
sidebar.close()

Events

CoreUI for Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event Description
hidden.coreui.sidebar This event is fired immediately when the hide instance method has been called.
hide.coreui.sidebar This event is fired when the sidebar has finished being closed from the user (will wait for CSS transitions to complete).
shown.coreui.sidebar This event fires immediately when the show instance method is called.
show.coreui.sidebar This event is fired when the sidebar has been made visible to the user (will wait for CSS transitions to complete) 
var mySidebar = document.getElementById('mySidebar')
mySidebar.addEventListener('closed.coreui.sidebar', function () {
  // do something…
})

Customizing

CSS variables

Sidebars use local CSS variables on .sidebar, .sidebar-backdrop, .sidebar-narrow, and .sidebar-nav for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/sidebar/_sidebar.scss
--#{$prefix}sidebar-zindex: #{$zindex-sidebar};
--#{$prefix}sidebar-width: #{$sidebar-width};
--#{$prefix}sidebar-bg: #{$sidebar-bg};
--#{$prefix}sidebar-padding-x: #{$sidebar-padding-x};
--#{$prefix}sidebar-padding-y: #{$sidebar-padding-y};
--#{$prefix}sidebar-color: #{$sidebar-color};
--#{$prefix}sidebar-brand-color: #{$sidebar-brand-color};
--#{$prefix}sidebar-brand-bg: #{$sidebar-brand-bg};
scss/sidebar/_sidebar.scss
--#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
scss/sidebar/_sidebar-narrow.scss
--#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
scss/sidebar/_sidebar-narrow.scss
--#{$prefix}sidebar-narrow-unfoldable-box-shadow: #{$sidebar-narrow-unfoldable-box-shadow};
scss/sidebar/_sidebar-nav.scss
--#{$prefix}sidebar-nav-padding-x: #{$sidebar-nav-padding-x};
--#{$prefix}sidebar-nav-padding-y: #{$sidebar-nav-padding-y};
--#{$prefix}sidebar-nav-gap: #{$sidebar-nav-gap};

--#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
--#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
--#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
--#{$prefix}sidebar-nav-title-color: #{$sidebar-nav-title-color};

--#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
--#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
--#{$prefix}sidebar-nav-link-color: #{$sidebar-nav-link-color};
--#{$prefix}sidebar-nav-link-bg: #{$sidebar-nav-link-bg};
--#{$prefix}sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};
--#{$prefix}sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
--#{$prefix}sidebar-nav-link-border-width: #{$sidebar-nav-link-border-width};

--#{$prefix}sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
--#{$prefix}sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
--#{$prefix}sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
--#{$prefix}sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
--#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};

--#{$prefix}sidebar-nav-link-icon-margin: #{$sidebar-nav-link-icon-margin};
--#{$prefix}sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
--#{$prefix}sidebar-nav-link-icon-width: #{$sidebar-nav-link-icon-width};
--#{$prefix}sidebar-nav-link-icon-height: #{$sidebar-nav-link-icon-height};
--#{$prefix}sidebar-nav-link-icon-font-size: #{$sidebar-nav-link-icon-font-size};
--#{$prefix}sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
--#{$prefix}sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
--#{$prefix}sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};

--#{$prefix}sidebar-nav-link-icon-bullet-size: #{$sidebar-nav-link-icon-bullet-size};
--#{$prefix}sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-link-icon-bullet-bg};
--#{$prefix}sidebar-nav-link-icon-bullet-border-width: #{$sidebar-nav-link-icon-bullet-border-width};
--#{$prefix}sidebar-nav-link-icon-bullet-border-radius: #{$sidebar-nav-link-icon-bullet-border-radius};
--#{$prefix}sidebar-nav-link-icon-bullet-border-color: #{$sidebar-nav-link-icon-bullet-border-color};
--#{$prefix}sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-link-active-icon-bullet-bg};
--#{$prefix}sidebar-nav-link-active-icon-bullet-border-color: #{$sidebar-nav-link-active-icon-bullet-border-color};
--#{$prefix}sidebar-nav-link-disabled-icon-bullet-bg: #{$sidebar-nav-link-disabled-icon-bullet-bg};
--#{$prefix}sidebar-nav-link-disabled-icon-bullet-border-color: #{$sidebar-nav-link-disabled-icon-bullet-border-color};
--#{$prefix}sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-link-hover-icon-bullet-bg};
--#{$prefix}sidebar-nav-link-hover-icon-bullet-border-color: #{$sidebar-nav-link-hover-icon-bullet-border-color};

--#{$prefix}sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
--#{$prefix}sidebar-nav-group-border-width: #{$sidebar-nav-group-border-width};
--#{$prefix}sidebar-nav-group-border-radius: #{$sidebar-nav-group-border-radius};
--#{$prefix}sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};
--#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
--#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
--#{$prefix}sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color};
--#{$prefix}sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};
--#{$prefix}sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};
--#{$prefix}sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
--#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
scss/sidebar/_sidebar.scss
--#{$prefix}sidebar-toggler-width: #{$sidebar-toggler-width};
--#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
--#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
--#{$prefix}sidebar-toggler-color: #{$sidebar-toggler-color};
--#{$prefix}sidebar-toggler-icon: #{escape-svg($sidebar-toggler-icon)};
--#{$prefix}sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color};
--#{$prefix}sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow};
--#{$prefix}sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color};
--#{$prefix}sidebar-toggler-transition: #{$sidebar-toggler-transition};
scss/sidebar/_sidebar.scss
--#{$prefix}backdrop-zindex: #{$zindex-sidebar-backdrop};
--#{$prefix}backdrop-bg: #{$sidebar-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$sidebar-backdrop-opacity};

SASS variables

scss/_variables.scss
$sidebar-width:                            16rem;
$sidebar-widths: (
  sm: 12rem,
  lg: 20rem,
  xl: 24rem
);
$sidebar-narrow-width:                     4rem;
$sidebar-padding-y:                        $spacer;
$sidebar-padding-x:                        $spacer;
$sidebar-color:                            var(--#{$prefix}body-color);
$sidebar-bg:                               var(--#{$prefix}body-bg);
$sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s;
$sidebar-brand-color:                      var(--#{$prefix}body-color);
$sidebar-brand-bg:                         rgba($black, .2);
$sidebar-backdrop-bg:                      $black;
$sidebar-backdrop-opacity:                 .5;
$sidebar-overlaid-box-shadow:              var(--#{$prefix}box-shadow);
$sidebar-narrow-unfoldable-box-shadow:     var(--#{$prefix}box-shadow);
scss/_variables.scss
$sidebar-toggler-width:             .5rem;
$sidebar-toggler-height:            .5rem;
$sidebar-toggler-padding-x:         .25rem;
$sidebar-toggler-padding-y:         .25rem;
$sidebar-toggler-bg:                transparent;
$sidebar-toggler-color:             var(--#{$prefix}tertiary-color);
$sidebar-toggler-icon:              url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E");
$sidebar-toggler-focus-shadow:      $focus-ring-box-shadow;
$sidebar-toggler-hover-color:       var(--#{$prefix}secondary-color);
$sidebar-toggler-focus-color:       var(--#{$prefix}secondary-color);
$sidebar-toggler-transition:        transform .15s;