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'

Property	Default	Type
as	`div`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'div') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
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.

jsx

import { CSidebarBrand } from '@coreui/react'

Property	Default	Type
as5.0.0+	`a`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'a') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
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.

jsx

import { CSidebarFooter } from '@coreui/react'

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

jsx

import { CSidebarHeader } from '@coreui/react'

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

jsx

import { CSidebarNav } from '@coreui/react'

Property	Default	Type
as5.0.0+	`ul`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'ul') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
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.
compact5.11.0+	-	`boolean`
Make navigation more compact by cutting link padding in half.
variant5.11.0+	-	`'tree'`
Sets the navigation variant.

jsx

import { CSidebarToggler } from '@coreui/react'

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