Framework:
Download Hire UsGet CoreUI PRO

React Sidebar Component

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue 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#

Sidebar Brand
<CSidebar>
  <CSidebarBrand>Sidebar Brand</CSidebarBrand>
  <CSidebarNav>
    <CNavTitle>Nav Title</CNavTitle>
    <CNavItem href="#">
      <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
      Nav item
    </CNavItem>
    <CNavItem href="#">
      <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
      With badge
      <CBadge color="primary ms-auto">NEW</CBadge>
    </CNavItem>
    <CNavGroup toggler="Nav dropdown">
      <CNavItem href="#">
        <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
      </CNavItem>
      <CNavItem href="#">
        <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
      </CNavItem>
    </CNavGroup>
  </CSidebarNav>
  <CSidebarToggler />
</CSidebar>

Customizing#

CSS variables#

React 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:          $disabled-inverse !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/react'
// or
import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSchemeSets if the color of text should be colored for a light or dark dark background.'dark' | 'light'-
narrowMake sidebar narrow.boolean-
onHideCallback fired when the component requests to be hidden.() => void-
onShowCallback fired when the component requests to be shown.() => void-
onVisibleChangeEvent emitted after visibility of component changed.(visible: boolean) => void-
overlaidSet sidebar to overlaid variant.boolean-
placementComponents placement, there’s no default placement.'start' | 'end'-
positionPlace sidebar in non-static positions.'fixed' | 'sticky'-
sizeSize the component small, large, or extra large.'sm' | 'lg' | 'xl'-
unfoldableExpand narrowed sidebar on hover.boolean-
visibleToggle the visibility of sidebar component.boolean-

CSidebarBrand#

import { CSidebarBrand } from '@coreui/react'
// or
import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-

CSidebarFooter#

import { CSidebarFooter } from '@coreui/react'
// or
import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-

CSidebarHeader#

import { CSidebarHeader } from '@coreui/react'
// or
import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-

CSidebarNav#

import { CSidebarNav } from '@coreui/react'
// or
import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-

CSidebarToggler#

import { CSidebarToggler } from '@coreui/react'
// or
import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.