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:
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
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.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 item8 </CNavItem>9 <CNavItem href="#">10 <CIcon customClassName="nav-icon" icon={cilSpeedometer} />11 With badge12 <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 item17 </CNavItem>18 <CNavItem href="#">19 <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item20 </CNavItem>21 </CNavGroup>22 </CSidebarNav>23 <CSidebarToggler />24</CSidebar>
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};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CSidebar style={vars}>...</CSidebar>
1$sidebar-width: 16rem;2$sidebar-widths: (3 sm: 12rem,4 lg: 20rem,5 xl: 24rem6);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;1415$sidebar-brand-height: 4rem;16$sidebar-brand-color: $high-emphasis-inverse;17$sidebar-brand-bg: rgba($black, .2);1819$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;2425$sidebar-narrow-width: 4rem;2627$sidebar-backdrop-bg: $black;28$sidebar-backdrop-opacity: .5;2930$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;3536$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;4546$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;4950$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;5354$sidebar-nav-link-disabled-color: $disabled-inverse;55$sidebar-nav-link-disabled-icon-color: $sidebar-nav-link-icon-color;5657$sidebar-nav-icon-width: 4rem;58$sidebar-nav-icon-height: 1.25rem;59$sidebar-nav-icon-font-size: $sidebar-nav-icon-height;6061$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;6465$sidebar-nav-group-items-padding-y: 0;66$sidebar-nav-group-items-padding-x: 0;67$sidebar-nav-group-items-transition: height .15s ease;6869$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;7475$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;8081$sidebar-toggler-height: 3rem;82$sidebar-toggler-bg: rgba($black, .2);83$sidebar-toggler-transition: transform .15s;8485$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);9091$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");9394$sidebar-light-color: $body-color;95$sidebar-light-bg: $white;96$sidebar-light-border-width: 0;97$sidebar-light-border-color: transparent;9899$sidebar-light-brand-color: $white;100$sidebar-light-brand-bg: $primary;101102$sidebar-light-header-bg: rgba($black, .2);103104$sidebar-light-nav-title-color: $medium-emphasis;105106$sidebar-light-nav-link-color: $medium-emphasis;107$sidebar-light-nav-link-bg: transparent;108$sidebar-light-nav-link-icon-color: $medium-emphasis;109110$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;113114$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;117118$sidebar-light-nav-link-disabled-color: $disabled;119$sidebar-light-nav-link-disabled-icon-color: $sidebar-light-nav-link-icon-color;120121$sidebar-light-nav-group-bg: rgba(0, 0, 0, .05);122$sidebar-light-nav-group-toggle-show-color: $sidebar-light-nav-link-color;123124$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>");128129$sidebar-light-footer-bg: rgba($black, .1);130131$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");
1import { CSidebar } from '@coreui/react'2// or3import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
colorScheme | Sets if the color of text should be colored for a light or dark dark background. | 'dark' | 'light' | - |
narrow | Make sidebar narrow. | boolean | - |
onHide | Callback fired when the component requests to be hidden. | () => void | - |
onShow | Callback fired when the component requests to be shown. | () => void | - |
onVisibleChange | Event emitted after visibility of component changed. | (visible: boolean) => void | - |
overlaid | Set sidebar to overlaid variant. | boolean | - |
placement | Components placement, there’s no default placement. | 'start' | 'end' | - |
position | Place sidebar in non-static positions. | 'fixed' | 'sticky' | - |
size | Size the component small, large, or extra large. | 'sm' | 'lg' | 'xl' | - |
unfoldable | Expand narrowed sidebar on hover. | boolean | - |
visible | Toggle the visibility of sidebar component. | boolean | - |
1import { CSidebarBrand } from '@coreui/react'2// or3import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
1import { CSidebarFooter } from '@coreui/react'2// or3import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
1import { CSidebarHeader } from '@coreui/react'2// or3import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
1import { CSidebarNav } from '@coreui/react'2// or3import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
1import { CSidebarToggler } from '@coreui/react'2// or3import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |