If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️Star🙏

React Sidebar Component

Supported content#

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.

Examples#

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 item
8    </CNavItem>
9    <CNavItem href="#">
10      <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
11      With badge
12      <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 item
17      </CNavItem>
18      <CNavItem href="#">
19        <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
20      </CNavItem>
21    </CNavGroup>
22  </CSidebarNav>
23  <CSidebarToggler />
24</CSidebar>

API#

CSidebar#

1import { CSidebar } from '@coreui/react'
2// or
3import 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`	-

CSidebarBrand#

1import { CSidebarBrand } from '@coreui/react'
2// or
3import 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`	-

CSidebarFooter#

1import { CSidebarFooter } from '@coreui/react'
2// or
3import 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`	-

CSidebarHeader#

1import { CSidebarHeader } from '@coreui/react'
2// or
3import 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`	-

CSidebarNav#

1import { CSidebarNav } from '@coreui/react'
2// or
3import 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`	-

CSidebarToggler#

1import { CSidebarToggler } from '@coreui/react'
2// or
3import 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`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

Code licensed MIT, docs CC BY 3.0.