React Offcanvas Component API

Offcanvas API

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

On this page

import { COffcanvas } from '@coreui/react'
// or
import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'

Property	Default	Type
backdrop#	`true`	`boolean`, `'static'`
Apply a backdrop on body while offcanvas is open.
className#	-	`string`
A string of all className you want applied to the base component.
dark#	-	`boolean`
Sets a darker color scheme.
keyboard#	`true`	`boolean`
Closes the offcanvas when escape key is pressed.
onHide#	-	`() => void`
Callback fired when the component requests to be hidden.
onShow#	-	`() => void`
Callback fired when the component requests to be shown.
placement#	-	`'start'`, `'end'`, `'top'`, `'bottom'`
Components placement, there’s no default placement.
portal#	`false`	`boolean`
Generates modal using createPortal.
responsive#4.6.0+	`true`	`boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`
Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
scroll#	`false`	`boolean`
Allow body scrolling while offcanvas is open
visible#	`false`	`boolean`
Toggle the visibility of offcanvas component.

import { COffcanvasBody } from '@coreui/react'
// or
import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody'

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

import { COffcanvasHeader } from '@coreui/react'
// or
import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader'

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

import { COffcanvasTitle } from '@coreui/react'
// or
import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle'

Property	Default	Type
as#	`h5`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'h5')`, `(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.