Framework:
Download Hire UsGet CoreUI PRO all-access →

React Sidebar Component

Sidebar

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

On this page

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#

Below is an sidebar example that is shown by default on desktop devices.

CoreUI
<CSidebar className="border-end">
  <CSidebarHeader className="border-bottom">
    <CSidebarBrand>CoreUI</CSidebarBrand>
  </CSidebarHeader>
  <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={
        <>
          <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
        </>
      }
    >
      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
    </CNavGroup>
    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
  </CSidebarNav>
  <CSidebarHeader className="border-top">
    <CSidebarToggler />
  </CSidebarHeader>
</CSidebar>

Narrow sidebar#

Add the narrow property to make the sidebar narrow.

CUI
<CSidebar className="border-end" narrow>
  <CSidebarHeader className="border-bottom">
    <CSidebarBrand>CUI</CSidebarBrand>
  </CSidebarHeader>
  <CSidebarNav>
    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /></CNavItem>
    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /></CNavItem>
  </CSidebarNav>
</CSidebar>

Unfoldable sidebar#

Add the unfoldable property to make the sidebar narrow with unfoldable on hover.

CUI
<CSidebar className="border-end" unfoldable>
  <CSidebarHeader className="border-bottom">
    <CSidebarBrand>CUI</CSidebarBrand>
  </CSidebarHeader>
  <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={
        <>
          <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
        </>
      }
    >
      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
    </CNavGroup>
    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
  </CSidebarNav>
</CSidebar>

Dark sidebar#

Change the appearance of sidebars with the colorScheme="dark".

CoreUI
<CSidebar className="border-end" colorScheme="dark">
  <CSidebarHeader className="border-bottom">
    <CSidebarBrand>CoreUI</CSidebarBrand>
  </CSidebarHeader>
  <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={
        <>
          <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
        </>
      }
    >
      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
    </CNavGroup>
    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
  </CSidebarNav>
</CSidebar>

Placement#

By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.

  • placement="start" places sidebar on the left of the viewport (shown above)
  • placement="end" places sidebar on the right of the viewport

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-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};
--cui-sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
--cui-sidebar-narrow-width: #{$sidebar-narrow-width};
--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};
--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};
--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-narrow-width:                     4rem !default;
$sidebar-padding-y:                        $spacer !default;
$sidebar-padding-x:                        $spacer !default;
$sidebar-color:                            var(--cui-body-color) !default;
$sidebar-bg:                               var(--cui-body-bg) !default;
$sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
$sidebar-brand-color:                      var(--cui-body-color) !default;
$sidebar-brand-bg:                         rgba($black, .2) !default;
$sidebar-backdrop-bg:                      $black !default;
$sidebar-backdrop-opacity:                 .5 !default;
$sidebar-overlaid-box-shadow:              var(--cui-box-shadow) !default;
$sidebar-narrow-unfoldable-box-shadow:     var(--cui-box-shadow) !default;
$sidebar-toggler-width:             .5rem !default;
$sidebar-toggler-height:            .5rem !default;
$sidebar-toggler-padding-x:         .25rem !default;
$sidebar-toggler-padding-y:         .25rem !default;
$sidebar-toggler-bg:                transparent !default;
$sidebar-toggler-color:             var(--cui-tertiary-color) !default;
$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.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
$sidebar-toggler-focus-shadow:      $focus-ring-box-shadow !default;
$sidebar-toggler-hover-color:       var(--cui-secondary-color) !default;
$sidebar-toggler-focus-color:       var(--cui-secondary-color) !default;
$sidebar-toggler-transition:        transform .15s !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
as
5.0.0+		Component used for the root node. Either a string to use a HTML element or a component.(ElementType & 'symbol') | (ElementType & 'object') | (ElementType & 'a') | (ElementType & 'slot') | (ElementType & 'style') | ... 174 more ... | (ElementType & FunctionComponent<...>)-
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
as
5.0.0+		Component used for the root node. Either a string to use a HTML element or a component.(ElementType & 'symbol') | (ElementType & 'object') | (ElementType & 'ul') | (ElementType & 'slot') | (ElementType & 'style') | ... 174 more ... | (ElementType & FunctionComponent<...>)-
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-

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.