React Sidebar Component API

Sidebar API

Merry Christmas & Happy New Year

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited offer ends 1st January 2025, use code 2024XMAS25 during checkout.

Get offer!

Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.

On this page

CSidebar#

import { CSidebar } from '@coreui/react'
// or
import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the component.
colorScheme#	-	`'dark'`, `'light'`
Sets if the color of text should be colored for a light or dark dark background.
narrow#	-	`boolean`
Make sidebar narrow.
onHide#	-	`() => void`
Callback fired when the component requests to be hidden.
onShow#	-	`() => void`
Callback fired when the component requests to be shown.
onVisibleChange#	-	`(visible: boolean) => void`
Event emitted after visibility of component changed.
overlaid#	-	`boolean`
Set sidebar to overlaid variant.
placement#	-	`'start'`, `'end'`
Components placement, there’s no default placement.
position#	-	`'fixed'`, `'sticky'`
Place sidebar in non-static positions.
size#	-	`'sm'`, `'lg'`, `'xl'`
Size the component small, large, or extra large.
unfoldable#	-	`boolean`
Expand narrowed sidebar on hover.
visible#	-	`boolean`
Toggle the visibility of sidebar component.

CSidebarBrand#

import { CSidebarBrand } from '@coreui/react'
// or
import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'

Property	Default	Type
as#5.0.0+	-	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'a')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 174 more ...`, `(ElementType & FunctionComponent<...>)`
Component used for the root node. Either a string to use a HTML element or a component.
className#	-	`string`
A string of all className you want applied to the component.

CSidebarFooter#

import { CSidebarFooter } from '@coreui/react'
// or
import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the component.

CSidebarHeader#

import { CSidebarHeader } from '@coreui/react'
// or
import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the component.

CSidebarNav#

import { CSidebarNav } from '@coreui/react'
// or
import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'

Property	Default	Type
as#5.0.0+	-	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'ul')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 174 more ...`, `(ElementType & FunctionComponent<...>)`
Component used for the root node. Either a string to use a HTML element or a component.
className#	-	`string`
A string of all className you want applied to the component.

CSidebarToggler#

import { CSidebarToggler } from '@coreui/react'
// or
import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the component.