Framework:
DownloadGet CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

React Sidebar Component

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
1<CSidebar>
2  <CSidebarBrand>Sidebar Brand</CSidebarBrand>
3  <CSidebarNav>
4    <CNavTitle>Nav Title</CNavTitle>
5    <CNavItem href="#">
6      <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
7      Nav item
8    </CNavItem>
9    <CNavItem href="#">
10      <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
11      With badge
12      <CBadge color="primary ms-auto">NEW</CBadge>
13    </CNavItem>
14    <CNavGroup toggler="Nav dropdown">
15      <CNavItem href="#">
16        <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
17      </CNavItem>
18      <CNavItem href="#">
19        <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
20      </CNavItem>
21    </CNavGroup>
22  </CSidebarNav>
23  <CSidebarToggler />
24</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.

1--cui-sidebar-width: #{$sidebar-width};
2--cui-sidebar-bg: #{$sidebar-bg};
3--cui-sidebar-padding-x: #{$sidebar-padding-x};
4--cui-sidebar-padding-y: #{$sidebar-padding-y};
5--cui-sidebar-color: #{$sidebar-color};
6--cui-sidebar-border-width: #{$sidebar-border-width};
7--cui-sidebar-border-color: #{$sidebar-border-color};
8--cui-sidebar-brand-color: #{$sidebar-brand-color};
9--cui-sidebar-brand-height: #{$sidebar-brand-height};
10--cui-sidebar-brand-bg: #{$sidebar-brand-bg};
11--cui-sidebar-header-height: #{$sidebar-header-height};
12--cui-sidebar-header-bg: #{$sidebar-header-bg};
13--cui-sidebar-header-padding-x: #{$sidebar-header-padding-x};
14--cui-sidebar-header-padding-y: #{$sidebar-header-padding-y};
15--cui-sidebar-footer-bg: #{$sidebar-footer-bg};
16--cui-sidebar-footer-height: #{$sidebar-footer-height};
17--cui-sidebar-footer-padding-x: #{$sidebar-footer-padding-x};
18--cui-sidebar-footer-padding-y: #{$sidebar-footer-padding-y};
19--cui-sidebar-toggler-bg: #{$sidebar-toggler-bg};
20--cui-sidebar-toggler-height: #{$sidebar-toggler-height};
21--cui-sidebar-toggler-indicator: #{escape-svg($sidebar-toggler-indicator-icon)};
22--cui-sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width};
23--cui-sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
24--cui-sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
25--cui-sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)}
26--cui-sidebar-narrow-width: #{$sidebar-narrow-width};
27--cui-sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
28--cui-sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
29--cui-sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
30--cui-sidebar-nav-title-color: #{$sidebar-nav-title-color};
31--cui-sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
32--cui-sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
33--cui-sidebar-nav-link-color: #{$sidebar-nav-link-color};
34--cui-sidebar-nav-link-bg: #{$sidebar-nav-link-bg};
35--cui-sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};
36--cui-sidebar-nav-link-border: #{$sidebar-nav-link-border-width} solid var(--cui-sidebar-nav-link-border-color);
37--cui-sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
38--cui-sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
39--cui-sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
40--cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
41--cui-sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
42--cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
43--cui-sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
44--cui-sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};
45--cui-sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};
46--cui-sidebar-nav-icon-width: #{$sidebar-nav-icon-width};
47--cui-sidebar-nav-icon-height: #{$sidebar-nav-icon-height};
48--cui-sidebar-nav-icon-font-size: #{$sidebar-nav-icon-font-size};
49--cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
50--cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
51--cui-sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
52--cui-sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
53--cui-sidebar-nav-group-indicator: #{escape-svg($sidebar-nav-group-indicator-icon)};
54--cui-sidebar-nav-group-indicator-hover: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
55--cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
1--cui-backdrop-zindex: #{$zindex-sidebar-backdrop};
2--cui-backdrop-bg: #{$sidebar-backdrop-bg};
3--cui-backdrop-opacity: #{$sidebar-backdrop-opacity};

How to use CSS variables#

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

SASS variables#

1$sidebar-width:                            16rem;
2$sidebar-widths: (
3  sm: 12rem,
4  lg: 20rem,
5  xl: 24rem
6);
7$sidebar-padding-y:                        0;
8$sidebar-padding-x:                        0;
9$sidebar-color:                            $high-emphasis-inverse;
10$sidebar-bg:                               $gray-base;
11$sidebar-border-width:                     0;
12$sidebar-border-color:                     transparent;
13$sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s;
14

15$sidebar-brand-height:                     4rem;
16$sidebar-brand-color:                      $high-emphasis-inverse;
17$sidebar-brand-bg:                         rgba($black, .2);
18

19$sidebar-header-height:                    4rem;
20$sidebar-header-padding-y:                 .75rem;
21$sidebar-header-padding-x:                 1rem;
22$sidebar-header-bg:                        rgba($black, .2);
23$sidebar-header-height-transition:         height .15s, padding .15s;
24

25$sidebar-narrow-width:                     4rem;
26

27$sidebar-backdrop-bg:                      $black;
28$sidebar-backdrop-opacity:                 .5;
29

30$sidebar-nav-title-padding-y:              .75rem;
31$sidebar-nav-title-padding-x:              1rem;
32$sidebar-nav-title-margin-top:             1rem;
33$sidebar-nav-title-color:                  $medium-emphasis-inverse;
34$sidebar-nav-title-transition:             height .15s, margin .15s;
35

36$sidebar-nav-link-padding-y:               .8445rem;
37$sidebar-nav-link-padding-x:               1rem;
38$sidebar-nav-link-color:                   $medium-emphasis-inverse;
39$sidebar-nav-link-bg:                      transparent;
40$sidebar-nav-link-border-width:            0;
41$sidebar-nav-link-border-color:            transparent;
42$sidebar-nav-link-border-radius:           0;
43$sidebar-nav-link-transition:              background .15s ease, color .15s ease;
44$sidebar-nav-link-icon-color:              $medium-emphasis-inverse;
45

46$sidebar-nav-link-hover-color:             $high-emphasis-inverse;
47$sidebar-nav-link-hover-bg:                rgba($white, .05);
48$sidebar-nav-link-hover-icon-color:        $high-emphasis-inverse;
49

50$sidebar-nav-link-active-color:            $high-emphasis-inverse;
51$sidebar-nav-link-active-bg:               rgba($white, .05);
52$sidebar-nav-link-active-icon-color:       $high-emphasis-inverse;
53

54$sidebar-nav-link-disabled-color:          $disabled-inverse;
55$sidebar-nav-link-disabled-icon-color:     $sidebar-nav-link-icon-color;
56

57$sidebar-nav-icon-width:                   4rem;
58$sidebar-nav-icon-height:                  1.25rem;
59$sidebar-nav-icon-font-size:               $sidebar-nav-icon-height;
60

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

65$sidebar-nav-group-items-padding-y:        0;
66$sidebar-nav-group-items-padding-x:        0;
67$sidebar-nav-group-items-transition:       height .15s ease;
68

69$sidebar-nav-group-indicator-color:        $medium-emphasis-inverse;
70$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>");
71$sidebar-nav-group-indicator-hover-color:  $sidebar-nav-link-hover-color;
72$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>");
73$sidebar-nav-group-indicator-transition:   transform .15s;
74

75$sidebar-footer-height:                    auto;
76$sidebar-footer-padding-y:                 .75rem;
77$sidebar-footer-padding-x:                 1rem;
78$sidebar-footer-bg:                        rgba($black, .2);
79$sidebar-footer-height-transition:         height .15s, padding .15s;
80

81$sidebar-toggler-height:                   3rem;
82$sidebar-toggler-bg:                       rgba($black, .2);
83$sidebar-toggler-transition:               transform .15s;
84

85$sidebar-toggler-indicator-width:          4rem;
86$sidebar-toggler-indicator-height:         3rem;
87$sidebar-toggler-indicator-color:          $gray-600;
88$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");
89$sidebar-toggler-hover-bg:                 rgba(0, 0, 0, .3);
90

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

94$sidebar-light-color:    $body-color;
95$sidebar-light-bg:       $white;
96$sidebar-light-border-width:                     0;
97$sidebar-light-border-color:                     transparent;
98

99$sidebar-light-brand-color:  $white;
100$sidebar-light-brand-bg:     $primary;
101

102$sidebar-light-header-bg: rgba($black, .2);
103

104$sidebar-light-nav-title-color:                  $medium-emphasis;
105

106$sidebar-light-nav-link-color:                   $medium-emphasis;
107$sidebar-light-nav-link-bg:                      transparent;
108$sidebar-light-nav-link-icon-color:              $medium-emphasis;
109

110$sidebar-light-nav-link-hover-color:             $high-emphasis;
111$sidebar-light-nav-link-hover-bg:                theme-color("primary");
112$sidebar-light-nav-link-hover-icon-color:        $high-emphasis;
113

114$sidebar-light-nav-link-active-color:            $high-emphasis;
115$sidebar-light-nav-link-active-bg:               rgba($white, .05);
116$sidebar-light-nav-link-active-icon-color:       $high-emphasis;
117

118$sidebar-light-nav-link-disabled-color:          $disabled;
119$sidebar-light-nav-link-disabled-icon-color:     $sidebar-light-nav-link-icon-color;
120

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

124$sidebar-light-nav-group-indicator-color:        $medium-emphasis;
125$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>");
126$sidebar-light-nav-group-indicator-hover-color:  $sidebar-light-nav-link-hover-color;
127$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>");
128

129$sidebar-light-footer-bg:                        rgba($black, .1);
130

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

API#

CSidebar#

1import { CSidebar } from '@coreui/react'
2// or
3import CSidebar from '@coreui/react-pro/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#

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

CSidebarFooter#

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

CSidebarHeader#

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

CSidebarNav#

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

CSidebarToggler#

1import { CSidebarToggler } from '@coreui/react'
2// or
3import CSidebarToggler from '@coreui/react-pro/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.

Code licensed MIT, docs CC BY 3.0.