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.
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 arole="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.
Example
JavaScript behavior
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
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
SASS
$sidebar-width: 16rem;
$sidebar-widths: (
sm: 12rem,
lg: 20rem,
xl: 24rem
);
$sidebar-padding-y: 0;
$sidebar-padding-x: 0;
$sidebar-color: $high-emphasis-inverse;
$sidebar-bg: $gray-base;
$sidebar-border-width: 0;
$sidebar-border-color: transparent;
$sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s;
$sidebar-brand-height: 4rem;
$sidebar-brand-color: $high-emphasis-inverse;
$sidebar-brand-bg: rgba($black, .2);
$sidebar-header-height: 4rem;
$sidebar-header-padding-y: .75rem;
$sidebar-header-padding-x: 1rem;
$sidebar-header-bg: rgba($black, .2);
$sidebar-header-height-transition: height .15s, padding .15s;
$sidebar-narrow-width: 4rem;
$sidebar-backdrop-bg: $black;
$sidebar-backdrop-opacity: .5;
$sidebar-backdrop-transition: opacity .15s linear;
$sidebar-nav-title-padding-y: .75rem;
$sidebar-nav-title-padding-x: 1rem;
$sidebar-nav-title-margin-top: 1rem;
$sidebar-nav-title-color: $medium-emphasis-inverse;
$sidebar-nav-title-transition: height .15s, margin .15s;
$sidebar-nav-link-padding-y: .8445rem;
$sidebar-nav-link-padding-x: 1rem;
$sidebar-nav-link-color: $medium-emphasis-inverse;
$sidebar-nav-link-bg: transparent;
$sidebar-nav-link-transition: background .15s ease, color .15s ease;
$sidebar-nav-link-icon-color: $medium-emphasis-inverse;
$sidebar-nav-link-hover-color: $high-emphasis-inverse;
$sidebar-nav-link-hover-bg: rgba($white, .05);
$sidebar-nav-link-hover-icon-color: $high-emphasis-inverse;
$sidebar-nav-link-active-color: $high-emphasis-inverse;
$sidebar-nav-link-active-bg: rgba($white, .05);
$sidebar-nav-link-active-icon-color: $high-emphasis-inverse;
$sidebar-nav-link-disabled-color: $disabled-inverse;
$sidebar-nav-link-disabled-icon-color: $sidebar-nav-link-icon-color;
$sidebar-nav-icon-width: 4rem;
$sidebar-nav-icon-height: 1.25rem;
$sidebar-nav-icon-font-size: $sidebar-nav-icon-height;
$sidebar-nav-group-bg: rgba(0, 0, 0, .2);
$sidebar-nav-group-transition: background .15s ease-in-out;
$sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color;
$sidebar-nav-group-items-padding-y: 0;
$sidebar-nav-group-items-padding-x: 0;
$sidebar-nav-group-items-transition: height .15s ease;
$sidebar-nav-group-indicator-color: $medium-emphasis-inverse;
$sidebar-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color;
$sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$sidebar-nav-group-indicator-transition: transform .15s;
$sidebar-footer-height: auto;
$sidebar-footer-padding-y: .75rem;
$sidebar-footer-padding-x: 1rem;
$sidebar-footer-bg: rgba($black, .2);
$sidebar-footer-height-transition: height .15s, padding .15s;
$sidebar-toggler-height: 3rem;
$sidebar-toggler-bg: rgba($black, .2);
$sidebar-toggler-transition: transform .15s;
$sidebar-toggler-indicator-width: 4rem;
$sidebar-toggler-indicator-height: 3rem;
$sidebar-toggler-indicator-color: $gray-600;
$sidebar-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
$sidebar-toggler-hover-bg: rgba(0, 0, 0, .3);
$sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color;
$sidebar-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
$sidebar-light-color: $body-color;
$sidebar-light-bg: $white;
$sidebar-light-border-width: 0;
$sidebar-light-border-color: transparent;
$sidebar-light-brand-color: $white;
$sidebar-light-brand-bg: $primary;
$sidebar-light-header-bg: rgba($black, .2);
$sidebar-light-nav-title-color: $medium-emphasis;
$sidebar-light-nav-link-color: $medium-emphasis;
$sidebar-light-nav-link-bg: transparent;
$sidebar-light-nav-link-icon-color: $medium-emphasis;
$sidebar-light-nav-link-hover-color: $high-emphasis;
$sidebar-light-nav-link-hover-bg: theme-color("primary");
$sidebar-light-nav-link-hover-icon-color: $high-emphasis;
$sidebar-light-nav-link-active-color: $high-emphasis;
$sidebar-light-nav-link-active-bg: rgba($white, .05);
$sidebar-light-nav-link-active-icon-color: $high-emphasis;
$sidebar-light-nav-link-disabled-color: $disabled;
$sidebar-light-nav-link-disabled-icon-color: $sidebar-light-nav-link-icon-color;
$sidebar-light-nav-group-bg: rgba(0, 0, 0, .05);
$sidebar-light-nav-group-toggle-show-color: $sidebar-light-nav-link-color;
$sidebar-light-nav-group-indicator-color: $medium-emphasis;
$sidebar-light-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$sidebar-light-nav-group-indicator-hover-color: $sidebar-light-nav-link-hover-color;
$sidebar-light-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$sidebar-light-footer-bg: rgba($black, .1);
$sidebar-light-toggler-bg: rgba($black, .1);
$sidebar-light-toggler-hover-bg: rgba(0, 0, 0, .2);
$sidebar-light-toggler-indicator-color: $medium-emphasis;
$sidebar-light-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
$sidebar-light-toggler-indicator-hover-color: $sidebar-light-nav-link-hover-color;
$sidebar-light-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
CSS Vars
--cui-is-mobile
--cui-sidebar-bg
--cui-sidebar-border-color
--cui-sidebar-border-width
--cui-sidebar-brand-bg
--cui-sidebar-brand-color
--cui-sidebar-color
--cui-sidebar-footer-bg
--cui-sidebar-header-bg
--cui-sidebar-nav-group-bg
--cui-sidebar-nav-group-indicator
--cui-sidebar-nav-group-indicator-hover
--cui-sidebar-nav-group-toggle-show-color
--cui-sidebar-nav-link-active-bg
--cui-sidebar-nav-link-active-color
--cui-sidebar-nav-link-active-icon-color
--cui-sidebar-nav-link-bg
--cui-sidebar-nav-link-color
--cui-sidebar-nav-link-disabled-color
--cui-sidebar-nav-link-disabled-icon-color
--cui-sidebar-nav-link-hover-bg
--cui-sidebar-nav-link-hover-color
--cui-sidebar-nav-link-hover-icon-color
--cui-sidebar-nav-link-icon-color
--cui-sidebar-nav-title-color
--cui-sidebar-occupy-end
--cui-sidebar-occupy-start
--cui-sidebar-toggler-bg
--cui-sidebar-toggler-hover-bg
--cui-sidebar-toggler-indicator
--cui-sidebar-toggler-indicator-hover
--cui-sidebar-width