React Sidebar Component API
Sidebar API
Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.
CSidebar#
import { CSidebar } from '@coreui/react'// orimport CSidebar from '@coreui/react/src/components/sidebar/CSidebar'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (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. | ||
| 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'// orimport 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'// orimport 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'// orimport 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'// orimport 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'// orimport CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the component. | ||