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>
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 | - |