Vue Sidebar Component

Vue 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, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

Supported content

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

  • <CSidebarHeader> for optional header.
  • <CSidebarBrand> for your company, product, or project name.
  • <CSidebarNav> for a full-height and lightweight navigation (including support for dropdowns).
  • <CSidebarFooter> for optional footer.
  • <CSidebarToggler> for use with our minimizer plugin.

Examples

<CSidebar visible>
  <CSidebarBrand>Sidebar Brand</CSidebarBrand>
  <CSidebarNav>
    <li class="nav-title">Nav Title</li>
    <CNavItem href="#">
      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
      Nav item
    </CNavItem>
    <CNavItem href="#">
        <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
        With badge
        <CBadge color="primary ms-auto">NEW</CBadge>
    </CNavItem>
    <CNavGroup>
      <template #togglerContent>
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
      </template>
      <CNavItem href="#">
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
      </CNavItem>
      <CNavItem href="#">
         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
      </CNavItem>
    </CNavGroup>
  </CSidebarNav>
  <CSidebarToggler/>
</CSidebar>

Customizing

CSS variables

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

--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-border-width: #{$sidebar-border-width};
--cui-sidebar-border-color: #{$sidebar-border-color};
--cui-sidebar-brand-color: #{$sidebar-brand-color};
--cui-sidebar-brand-height: #{$sidebar-brand-height};
--cui-sidebar-brand-bg: #{$sidebar-brand-bg};
--cui-sidebar-close-button-width: #{$sidebar-close-button-width};
--cui-sidebar-close-button-height: #{$sidebar-close-button-height};
--cui-sidebar-header-height: #{$sidebar-header-height};
--cui-sidebar-header-bg: #{$sidebar-header-bg};
--cui-sidebar-header-padding-x: #{$sidebar-header-padding-x};
--cui-sidebar-header-padding-y: #{$sidebar-header-padding-y};
--cui-sidebar-footer-bg: #{$sidebar-footer-bg};
--cui-sidebar-footer-height: #{$sidebar-footer-height};
--cui-sidebar-footer-padding-x: #{$sidebar-footer-padding-x};
--cui-sidebar-footer-padding-y: #{$sidebar-footer-padding-y};
--cui-sidebar-toggler-bg: #{$sidebar-toggler-bg};
--cui-sidebar-toggler-height: #{$sidebar-toggler-height};
--cui-sidebar-toggler-indicator: #{escape-svg($sidebar-toggler-indicator-icon)};
--cui-sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width};
--cui-sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
--cui-sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
--cui-sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)};

--cui-sidebar-narrow-width: #{$sidebar-narrow-width};

--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: #{$sidebar-nav-link-border-width} solid var(--cui-sidebar-nav-link-border-color);
--cui-sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
--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-active-icon-color: #{$sidebar-nav-link-active-icon-color};
--cui-sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
--cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-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-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};
--cui-sidebar-nav-icon-width: #{$sidebar-nav-icon-width};
--cui-sidebar-nav-icon-height: #{$sidebar-nav-icon-height};
--cui-sidebar-nav-icon-font-size: #{$sidebar-nav-icon-font-size};
--cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
--cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
--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: #{escape-svg($sidebar-nav-group-indicator-icon)};
--cui-sidebar-nav-group-indicator-hover: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
--cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
--cui-backdrop-zindex: #{$zindex-sidebar-backdrop};
--cui-backdrop-bg: #{$sidebar-backdrop-bg};
--cui-backdrop-opacity: #{$sidebar-backdrop-opacity};

How to use CSS variables

const vars = { 
  '--my-css-var': 10,
  '--my-another-css-var': "red" 
}
return <CSidebar :style="vars">...</CSidebar>

SASS variables

$sidebar-width:                            16rem !default;
$sidebar-widths: (
  sm: 12rem,
  lg: 20rem,
  xl: 24rem
) !default;
$sidebar-padding-y:                        0 !default;
$sidebar-padding-x:                        0 !default;
$sidebar-color:                            $high-emphasis-inverse !default;
$sidebar-bg:                               $gray-base !default;
$sidebar-border-width:                     0 !default;
$sidebar-border-color:                     transparent !default;
$sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;

$sidebar-close-button-width:               2rem !default;
$sidebar-close-button-height:              4rem !default;

$sidebar-brand-height:                     4rem !default;
$sidebar-brand-color:                      $high-emphasis-inverse !default;
$sidebar-brand-bg:                         rgba($black, .2) !default;

$sidebar-header-height:                    4rem !default;
$sidebar-header-padding-y:                 .75rem !default;
$sidebar-header-padding-x:                 1rem !default;
$sidebar-header-bg:                        rgba($black, .2) !default;
$sidebar-header-height-transition:         height .15s, padding .15s !default;

$sidebar-narrow-width:                     4rem !default;

$sidebar-backdrop-bg:                      $black !default;
$sidebar-backdrop-opacity:                 .5 !default;

$sidebar-nav-title-padding-y:              .75rem !default;
$sidebar-nav-title-padding-x:              1rem !default;
$sidebar-nav-title-margin-top:             1rem !default;
$sidebar-nav-title-color:                  $medium-emphasis-inverse !default;
$sidebar-nav-title-transition:             height .15s, margin .15s !default;

$sidebar-nav-link-padding-y:               .8445rem !default;
$sidebar-nav-link-padding-x:               1rem !default;
$sidebar-nav-link-color:                   $medium-emphasis-inverse !default;
$sidebar-nav-link-bg:                      transparent !default;
$sidebar-nav-link-border-width:            0 !default;
$sidebar-nav-link-border-color:            transparent !default;
$sidebar-nav-link-border-radius:           0 !default;
$sidebar-nav-link-transition:              background .15s ease, color .15s ease !default;
$sidebar-nav-link-icon-color:              $medium-emphasis-inverse !default;

$sidebar-nav-link-hover-color:             $high-emphasis-inverse !default;
$sidebar-nav-link-hover-bg:                rgba($white, .05) !default;
$sidebar-nav-link-hover-icon-color:        $high-emphasis-inverse !default;

$sidebar-nav-link-active-color:            $high-emphasis-inverse !default;
$sidebar-nav-link-active-bg:               rgba($white, .05) !default;
$sidebar-nav-link-active-icon-color:       $high-emphasis-inverse !default;

$sidebar-nav-link-disabled-color:          $disabled-inverse !default;
$sidebar-nav-link-disabled-icon-color:     $sidebar-nav-link-icon-color !default;

$sidebar-nav-icon-width:                   4rem !default;
$sidebar-nav-icon-height:                  1.25rem !default;
$sidebar-nav-icon-font-size:               $sidebar-nav-icon-height !default;

$sidebar-nav-group-bg:                     rgba(0, 0, 0, .2) !default;
$sidebar-nav-group-transition:             background .15s ease-in-out !default;
$sidebar-nav-group-toggle-show-color:      $sidebar-nav-link-color !default;

$sidebar-nav-group-items-padding-y:        0 !default;
$sidebar-nav-group-items-padding-x:        0 !default;
$sidebar-nav-group-items-transition:       height .15s ease !default;

$sidebar-nav-group-indicator-color:        $medium-emphasis-inverse !default;
$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>") !default;
$sidebar-nav-group-indicator-hover-color:  $sidebar-nav-link-hover-color !default;
$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>") !default;
$sidebar-nav-group-indicator-transition:   transform .15s !default;

$sidebar-footer-height:                    auto !default;
$sidebar-footer-padding-y:                 .75rem !default;
$sidebar-footer-padding-x:                 1rem !default;
$sidebar-footer-bg:                        rgba($black, .2) !default;
$sidebar-footer-height-transition:         height .15s, padding .15s !default;

$sidebar-toggler-height:                   3rem !default;
$sidebar-toggler-bg:                       rgba($black, .2) !default;
$sidebar-toggler-transition:               transform .15s !default;

$sidebar-toggler-indicator-width:          4rem !default;
$sidebar-toggler-indicator-height:         3rem !default;
$sidebar-toggler-indicator-color:          $gray-600 !default;
$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") !default;
$sidebar-toggler-hover-bg:                 rgba(0, 0, 0, .3) !default;

$sidebar-toggler-indicator-hover-color:    $sidebar-nav-link-hover-color !default;
$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") !default;

$sidebar-light-color:    $body-color !default;
$sidebar-light-bg:       $white !default;
$sidebar-light-border-width:                     0 !default;
$sidebar-light-border-color:                     transparent !default;

$sidebar-light-brand-color:  $white !default;
$sidebar-light-brand-bg:     $primary !default;

$sidebar-light-header-bg: rgba($black, .2) !default;

$sidebar-light-nav-title-color:                  $medium-emphasis !default;

$sidebar-light-nav-link-color:                   $medium-emphasis !default;
$sidebar-light-nav-link-bg:                      transparent !default;
$sidebar-light-nav-link-icon-color:              $medium-emphasis !default;

$sidebar-light-nav-link-hover-color:             $high-emphasis !default;
$sidebar-light-nav-link-hover-bg:                theme-color("primary") !default;
$sidebar-light-nav-link-hover-icon-color:        $high-emphasis !default;

$sidebar-light-nav-link-active-color:            $high-emphasis !default;
$sidebar-light-nav-link-active-bg:               rgba($white, .05) !default;
$sidebar-light-nav-link-active-icon-color:       $high-emphasis !default;

$sidebar-light-nav-link-disabled-color:          $disabled !default;
$sidebar-light-nav-link-disabled-icon-color:     $sidebar-light-nav-link-icon-color !default;

$sidebar-light-nav-group-bg:                     rgba(0, 0, 0, .05) !default;
$sidebar-light-nav-group-toggle-show-color:      $sidebar-light-nav-link-color !default;

$sidebar-light-nav-group-indicator-color:        $medium-emphasis !default;
$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>") !default;
$sidebar-light-nav-group-indicator-hover-color:  $sidebar-light-nav-link-hover-color !default;
$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>") !default;

$sidebar-light-footer-bg:                        rgba($black, .1) !default;

$sidebar-light-toggler-bg:                       rgba($black, .1) !default;
$sidebar-light-toggler-hover-bg:                 rgba(0, 0, 0, .2) !default;
$sidebar-light-toggler-indicator-color:          $medium-emphasis !default;
$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") !default;
$sidebar-light-toggler-indicator-hover-color:    $sidebar-light-nav-link-hover-color !default;
$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") !default;

API

CSidebar

import { CSidebar } from '@coreui/vue'
// or
import CSidebar from '@coreui/vue/src/components/sidebar/CSidebar'

Props

Prop nameDescriptionTypeValuesDefault
color-schemeSets if the color of text should be colored for a light or dark dark background.string'dark', light'-
narrowMake sidebar narrow.boolean--
overlaidSet sidebar to overlaid variant.boolean--
placementComponents placement, there’s no default placement.string'start', 'end'-
positionPlace sidebar in non-static positions.string--
sizeSize the component small, large, or extra large.string--
unfoldableExpand narrowed sidebar on hover.boolean--
visibleToggle the visibility of sidebar component.boolean--

Events

Event nameDescriptionProperties
hideCallback fired when the component requests to be hidden.
showCallback fired when the component requests to be shown.
visible-changeEvent emitted after visibility of component changed.