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#

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>

API#

CSidebar#

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

1import { CSidebarBrand } from '@coreui/react'
2// or
3import CSidebarBrand from '@coreui/react/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/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/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/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/src/components/sidebar/CSidebarToggler'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-