Vue Offcanvas Component API

Offcanvas API

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

On this page

jsx

import { COffcanvas } from '@coreui/vue'

Property	Default	Type
animation6.0.0+	`true`	`boolean`
Remove animation to create an offcanvas that simply appears rather than slides into view.
backdrop	`true`	`boolean`, `string`
Apply a backdrop on body while offcanvas is open. `'static'` keeps it open on a backdrop click and bounces it instead.
dark	-	`boolean`
Sets a darker color scheme.
keyboard	`true`	`boolean`
Closes the offcanvas when escape key is pressed.
placement	-	`string`
Components placement, there’s no default placement.
responsive4.7.0+	`true`	`boolean`, `string`
Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
scroll	`false`	`boolean`
Allow body scrolling while offcanvas is open
show6.0.0+	`undefined`	`boolean`
Control the open state. When set, the offcanvas renders what `show` says and dismiss gestures only emit `update:show` — nothing closes until the parent flips the prop.
visibleDeprecated 6.0.0	`undefined`	`boolean`
Toggle the visibility of offcanvas component. Use `show` / `v-model:show` instead — `visible` is ignored when `show` is set.

Event name
hide
Callback fired once the component has been hidden.
show
Callback fired when the component requests to be shown.
update:show
Callback fired when the offcanvas requests an open-state change — a dismiss gesture (Escape, backdrop click) or any internal toggle. In controlled mode update `show` yourself, or the offcanvas stays as it is.

jsx

import { COffcanvasBody } from '@coreui/vue'

jsx

import { COffcanvasHeader } from '@coreui/vue'

jsx

import { COffcanvasTitle } from '@coreui/vue'

Property	Default	Type
as	`'h5'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.