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.
🤖 Looking for the LLM-optimized version?View llm.md
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
.showto the.sidebar. - Sidebar is shown by default on desktop devices. Force it to be hidden by adding
.hideto 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-navto 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-headerfor optional header..sidebar-brandfor your company, product, or project name..sidebar-navfor a full-height and lightweight navigation (including support for dropdowns)..sidebar-footerfor optional footer..sidebar-togglerfor use with our minimizer plugin.
Examples
Sidebar component
Below is an sidebar example that is shown by default on desktop devices.
html
<divclass="sidebar border-end"><divclass="sidebar-header border-bottom"><divclass="sidebar-brand">CoreUI</div></div><ulclass="sidebar-nav"><liclass="nav-title">Nav Title</li><liclass="nav-item"><aclass="nav-link active"href="#"><iclass="nav-icon cil-speedometer"></i> Nav item</a></li><liclass="nav-item"><aclass="nav-link"href="#"><iclass="nav-icon cil-speedometer"></i> With badge<spanclass="badge bg-primary ms-auto">NEW</span></a></li><liclass="nav-item nav-group show"><aclass="nav-link nav-group-toggle"href="#"><iclass="nav-icon cil-puzzle"></i> Nav dropdown</a><ulclass="nav-group-items"><liclass="nav-item"><aclass="nav-link"href="#"><spanclass="nav-icon"><spanclass="nav-icon-bullet"></span></span> Nav dropdown item</a></li><liclass="nav-item"><aclass="nav-link"href="#"><spanclass="nav-icon"><spanclass="nav-icon-bullet"></span></span> Nav dropdown item</a></li></ul></li><liclass="nav-item mt-5"><aclass="nav-link"href="https://coreui.io"><iclass="nav-icon cil-cloud-download"></i> Download CoreUI</a></li><liclass="nav-item"><aclass="nav-link"href="https://coreui.io/pro/"><iclass="nav-icon cil-layers"></i> Try CoreUI<strong>PRO</strong></a></li></ul><divclass="sidebar-footer border-top d-flex"><buttonclass="sidebar-toggler"type="button"></button></div></div>Narrow sidebar
Add the.sidebar-narrow class to make the sidebar narrow.
html
<divclass="sidebar sidebar-narrow border-end"><divclass="sidebar-header border-bottom"><divclass="sidebar-brand">CUI</div></div><ulclass="sidebar-nav"><liclass="nav-item"><aclass="nav-link"href="#"><iclass="nav-icon cil-speedometer"></i></a></li><liclass="nav-item"><aclass="nav-link"href="#"><iclass="nav-icon cil-speedometer"></i></a></li><liclass="nav-item"><aclass="nav-link"href="https://coreui.io"><iclass="nav-icon cil-cloud-download"></i></li><liclass="nav-item"><aclass="nav-link"href="https://coreui.io/pro/"><iclass="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.
html
<divclass="sidebar sidebar-narrow-unfoldable border-end"><divclass="sidebar-header border-bottom"><divclass="sidebar-brand">CUI</div></div><ulclass="sidebar-nav"><liclass="nav-title">Nav Title</li><liclass="nav-item"><aclass="nav-link"href="#"><iclass="nav-icon cil-speedometer"></i> Nav item</a></li><liclass="nav-item"><aclass="nav-link"href="#"><iclass="nav-icon cil-speedometer"></i> With badge<spanclass="badge bg-primary ms-auto">NEW</span></a></li><liclass="nav-item nav-group show"><aclass="nav-link nav-group-toggle"href="#"><iclass="nav-icon cil-puzzle"></i> Nav dropdown</a><ulclass="nav-group-items"><liclass="nav-item"><aclass="nav-link"href="#"><spanclass="nav-icon"><spanclass="nav-icon-bullet"></span></span> Nav dropdown item</a></li><liclass="nav-item"><aclass="nav-link"href="#"><spanclass="nav-icon"><spanclass="nav-icon-bullet"></span></span> Nav dropdown item</a></li></ul></li><liclass="nav-item mt-auto"><aclass="nav-link"href="https://coreui.io"><iclass="nav-icon cil-cloud-download"></i> Download CoreUI</a></li><liclass="nav-item"><aclass="nav-link"href="https://coreui.io/pro/"><iclass="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.
html
<divclass="sidebar sidebar-dark border-end"><divclass="sidebar-header border-bottom"><divclass="sidebar-brand">CoreUI</div></div><ulclass="sidebar-nav"><liclass="nav-title">Nav Title</li><liclass="nav-item"><aclass="nav-link active"href="#"><iclass="nav-icon cil-speedometer"></i> Nav item</a></li><liclass="nav-item"><aclass="nav-link"href="#"><iclass="nav-icon cil-speedometer"></i> With badge<spanclass="badge bg-primary ms-auto">NEW</span></a></li><liclass="nav-item nav-group show"><aclass="nav-link nav-group-toggle"href="#"><iclass="nav-icon cil-puzzle"></i> Nav dropdown</a><ulclass="nav-group-items"><liclass="nav-item"><aclass="nav-link"href="#"><spanclass="nav-icon"><spanclass="nav-icon-bullet"></span></span> Nav dropdown item</a></li><liclass="nav-item"><aclass="nav-link"href="#"><spanclass="nav-icon"><spanclass="nav-icon-bullet"></span></span> Nav dropdown item</a></li></ul></li><liclass="nav-item mt-5"><aclass="nav-link"href="https://coreui.io"><iclass="nav-icon cil-cloud-download"></i> Download CoreUI</a></li><liclass="nav-item"><aclass="nav-link"href="https://coreui.io/pro/"><iclass="nav-icon cil-layers"></i> Try CoreUI<strong>PRO</strong></a></li></ul><divclass="sidebar-footer border-top d-flex"><buttonclass="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-startplaces sidebar on the left of the viewport (shown above).sidebar-endplaces sidebar on the right of the viewport
JavaScript behavior
Heads up! In our documentation, all examples showstandard CoreUI implementation. If you are using aBootstrap-compatible version of CoreUI, remember to use the following changes:
- In the constructor, please usebootstrap instead ofcoreui. For example,
new bootstrap.Alert(...)instead ofnew coreui.Alert(...) - In events, please usebs instead ofcoreui, for example
close.bs.alertinstead ofclose.coreui.alert - In data attributes, please usebs instead ofcoreui. For example,
data-bs-toggle="..."instead ofdata-coreui-toggle="..."
Methods
You can create a sidebar instance with the sidebar constructor, for example:
varmySidebar=document.querySelector('#mySidebar')varsidebar=newcoreui.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. |
varsidebarNode=document.querySelector('#mySidebar')varsidebar=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 thehide 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 theshow 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) |
varmySidebar=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
--cui-sidebar-zindex:#{$zindex-sidebar};--cui-sidebar-width:#{$sidebar-width};--cui-sidebar-bg:#{$sidebar-bg};--cui-sidebar-padding-x:#{$sidebar-padding-x};--cui-sidebar-padding-y:#{$sidebar-padding-y};--cui-sidebar-color:#{$sidebar-color};--cui-sidebar-brand-color:#{$sidebar-brand-color};--cui-sidebar-brand-bg:#{$sidebar-brand-bg};scss/sidebar/_sidebar.scss
--cui-sidebar-overlaid-box-shadow:#{$sidebar-overlaid-box-shadow};scss/sidebar/_sidebar-narrow.scss
--cui-sidebar-narrow-width:#{$sidebar-narrow-width};scss/sidebar/_sidebar-narrow.scss
--cui-sidebar-narrow-unfoldable-box-shadow:#{$sidebar-narrow-unfoldable-box-shadow};scss/sidebar/_sidebar-nav.scss
--cui-sidebar-nav-padding-x:#{$sidebar-nav-padding-x};--cui-sidebar-nav-padding-y:#{$sidebar-nav-padding-y};--cui-sidebar-nav-gap:#{$sidebar-nav-gap};--cui-sidebar-nav-title-padding-x:#{$sidebar-nav-title-padding-x};--cui-sidebar-nav-title-padding-y:#{$sidebar-nav-title-padding-y};--cui-sidebar-nav-title-margin-top:#{$sidebar-nav-title-margin-top};--cui-sidebar-nav-title-color:#{$sidebar-nav-title-color};--cui-sidebar-nav-link-padding-x:#{$sidebar-nav-link-padding-x};--cui-sidebar-nav-link-padding-y:#{$sidebar-nav-link-padding-y};--cui-sidebar-nav-link-color:#{$sidebar-nav-link-color};--cui-sidebar-nav-link-bg:#{$sidebar-nav-link-bg};--cui-sidebar-nav-link-border-color:#{$sidebar-nav-link-border-color};--cui-sidebar-nav-link-border-radius:#{$sidebar-nav-link-border-radius};--cui-sidebar-nav-link-border-width:#{$sidebar-nav-link-border-width};--cui-sidebar-nav-link-active-color:#{$sidebar-nav-link-active-color};--cui-sidebar-nav-link-active-bg:#{$sidebar-nav-link-active-bg};--cui-sidebar-nav-link-disabled-color:#{$sidebar-nav-link-disabled-color};--cui-sidebar-nav-link-hover-color:#{$sidebar-nav-link-hover-color};--cui-sidebar-nav-link-hover-bg:#{$sidebar-nav-link-hover-bg};--cui-sidebar-nav-link-icon-margin:#{$sidebar-nav-link-icon-margin};--cui-sidebar-nav-link-icon-color:#{$sidebar-nav-link-icon-color};--cui-sidebar-nav-link-icon-width:#{$sidebar-nav-link-icon-width};--cui-sidebar-nav-link-icon-height:#{$sidebar-nav-link-icon-height};--cui-sidebar-nav-link-icon-font-size:#{$sidebar-nav-link-icon-font-size};--cui-sidebar-nav-link-active-icon-color:#{$sidebar-nav-link-active-icon-color};--cui-sidebar-nav-link-disabled-icon-color:#{$sidebar-nav-link-disabled-icon-color};--cui-sidebar-nav-link-hover-icon-color:#{$sidebar-nav-link-hover-icon-color};--cui-sidebar-nav-link-icon-bullet-size:#{$sidebar-nav-link-icon-bullet-size};--cui-sidebar-nav-link-icon-bullet-bg:#{$sidebar-nav-link-icon-bullet-bg};--cui-sidebar-nav-link-icon-bullet-border-width:#{$sidebar-nav-link-icon-bullet-border-width};--cui-sidebar-nav-link-icon-bullet-border-radius:#{$sidebar-nav-link-icon-bullet-border-radius};--cui-sidebar-nav-link-icon-bullet-border-color:#{$sidebar-nav-link-icon-bullet-border-color};--cui-sidebar-nav-link-active-icon-bullet-bg:#{$sidebar-nav-link-active-icon-bullet-bg};--cui-sidebar-nav-link-active-icon-bullet-border-color:#{$sidebar-nav-link-active-icon-bullet-border-color};--cui-sidebar-nav-link-disabled-icon-bullet-bg:#{$sidebar-nav-link-disabled-icon-bullet-bg};--cui-sidebar-nav-link-disabled-icon-bullet-border-color:#{$sidebar-nav-link-disabled-icon-bullet-border-color};--cui-sidebar-nav-link-hover-icon-bullet-bg:#{$sidebar-nav-link-hover-icon-bullet-bg};--cui-sidebar-nav-link-hover-icon-bullet-border-color:#{$sidebar-nav-link-hover-icon-bullet-border-color};--cui-sidebar-nav-group-bg:#{$sidebar-nav-group-bg};--cui-sidebar-nav-group-border-width:#{$sidebar-nav-group-border-width};--cui-sidebar-nav-group-border-radius:#{$sidebar-nav-group-border-radius};--cui-sidebar-nav-group-border-color:#{$sidebar-nav-group-border-color};--cui-sidebar-nav-group-items-padding-y:#{$sidebar-nav-group-items-padding-y};--cui-sidebar-nav-group-items-padding-x:#{$sidebar-nav-group-items-padding-x};--cui-sidebar-nav-group-indicator-color:#{$sidebar-nav-group-indicator-color};--cui-sidebar-nav-group-indicator-icon:#{escape-svg($sidebar-nav-group-indicator-icon)};--cui-sidebar-nav-group-indicator-hover-color:#{$sidebar-nav-group-indicator-hover-color};--cui-sidebar-nav-group-indicator-hover-icon:#{escape-svg($sidebar-nav-group-indicator-hover-icon)};--cui-sidebar-nav-group-toggle-show-color:#{$sidebar-nav-group-toggle-show-color};scss/sidebar/_sidebar.scss
--cui-sidebar-toggler-width:#{$sidebar-toggler-width};--cui-sidebar-toggler-height:#{$sidebar-toggler-height};--cui-sidebar-toggler-bg:#{$sidebar-toggler-bg};--cui-sidebar-toggler-color:#{$sidebar-toggler-color};--cui-sidebar-toggler-icon:#{escape-svg($sidebar-toggler-icon)};--cui-sidebar-toggler-hover-color:#{$sidebar-toggler-hover-color};--cui-sidebar-toggler-focus-shadow:#{$sidebar-toggler-focus-shadow};--cui-sidebar-toggler-focus-color:#{$sidebar-toggler-focus-color};--cui-sidebar-toggler-transition:#{$sidebar-toggler-transition};scss/sidebar/_sidebar.scss
--cui-backdrop-zindex:#{$zindex-sidebar-backdrop};--cui-backdrop-bg:#{$sidebar-backdrop-bg};--cui-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-index0sease.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.377363.306232.004385.933366.627251.31232.004116.687209.377139.313305.374235.31116235.31116267.311305.372267.311209.377363.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;