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.

On this page

jsx

import { CSidebar } from '@coreui/react-pro'

Property	Default	Type
as	`div`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'div')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 175 more ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
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`, `undefined`
Make sidebar narrow.
onHide	-	`(() => void)`, `undefined`
Callback fired when the component requests to be hidden.
onShow	-	`(() => void)`, `undefined`
Callback fired when the component requests to be shown.
onVisibleChange	-	`((visible: boolean) => void)`, `undefined`
Event emitted after visibility of component changed.
overlaid	-	`boolean`, `undefined`
Set sidebar to overlaid variant.
placement	-	`'start'`, `'end'`
Components placement, there’s no default placement.
position	-	`'fixed'`, `'sticky'`, `undefined`
Place sidebar in non-static positions.
size	-	`'sm'`, `'lg'`, `'xl'`, `undefined`
Size the component small, large, or extra large.
unfoldable	-	`boolean`, `undefined`
Expand narrowed sidebar on hover.
visible	-	`boolean`, `undefined`
Toggle the visibility of sidebar component.

jsx

import { CSidebarBrand } from '@coreui/react-pro'

Property	Default	Type
as5.0.0+	`a`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'a')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 175 more ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
A string of all className you want applied to the component.

jsx

import { CSidebarFooter } from '@coreui/react-pro'

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

jsx

import { CSidebarHeader } from '@coreui/react-pro'

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

jsx

import { CSidebarNav } from '@coreui/react-pro'

Property	Default	Type
as5.0.0+	`ul`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'ul')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 175 more ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
A string of all className you want applied to the component.
compact5.11.0+	-	`boolean`, `undefined`
Make navigation more compact by cutting link padding in half.
variant5.11.0+	-	`'tree'`, `undefined`
Sets the navigation variant.

jsx

import { CSidebarToggler } from '@coreui/react-pro'

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